document.queryselectorall是html质量指标的唯一可信来源，因其直接反映真实dom状态，可精准捕获如缺失alt的img、危险javascript:跳转等运行时缺陷，且比正则匹配和静态扫描更可靠、可归因。
全局可用性不是“所有页面都跑一遍 Lighthouse”，而是让大屏能实时反映用户真实访问时 HTML 是否可被解析、可被聚焦、可被屏幕阅读器读取——这要求指标必须从 document 实际状态中提取，而非静态扫描或快照。
为什么 document.querySelectorAll 是质量指标的唯一可信来源
浏览器不会告诉你“HTML 写得不规范”，但会暴露它运行时的真实缺陷。比如：document.querySelectorAll('a[href^="javascript:"]') 能抓到绕过 CSP 的危险跳转，而 ESLint 根本看不到这些内联行为；document.querySelectorAll('img:not([alt])') 统计的是最终渲染缺失 alt 的图片数，不是源码里漏写的个数。
- 正则匹配 HTML 字符串会被模板语法、注释、服务端动态片段干扰，结果不可信
-
form.noValidate属性是否被误加，DOM API 可直接读取，比查字符串novalidate更准确 - 判断
iframe是否存在混合内容，用new URL(iframe.src).protocol比src.indexOf('http://')更健壮
如何让大屏指标真正可归因、可行动
显示“HTML 错误数：127”毫无意义。你得知道这 127 个问题里，有多少来自 CMS 输出（后端修复）、多少来自组件库（升级版本）、多少是用户粘贴富文本导致（前端拦截）。
- 用
MutationObserver监听document.body下新增的script或style标签，识别第三方 SDK 注入污染 - 对
console.error做代理捕获时，过滤掉ResizeObserver loop limit exceeded这类已知良性错误 - 用
performance.getEntriesByType('navigation')和performance.getEntriesByType('resource')关联 DOM 解析耗时与子资源阻塞，定位劣化源头
Chart.js 渲染前最容易被忽略的三个 DOM 条件
图表初始化失败，90% 不是配置错，而是 DOM 没准备好或尺寸不可测。
-
document.getElementById('metric-chart')必须在调用echarts.init()前存在，且不能写在里；Vue 中建议用nextTick包一层 - 容器必须有明确尺寸：
<div class="chart-container"><canvas id="xxx"></canvas></div>+ CSS 设min-height: 300px，禁用display: none - 时间轴数据必须是 ISO 字符串或
Date对象，并启用type: 'time'配置；多指标共用时间轴时，datasets.data长度必须一致，缺值填null，不能省略
真正难的不是画出图表，而是让每个数字背后都能快速定位到具体 DOM 节点、具体工程责任方、具体修复路径——这意味着你得在采集阶段就做结构化打标，而不是等数据进图表才开始分类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
