为何Google Lighthouse统计的DOM元素数量与控制台查询结果不一致

两个统计结果均无错误，数值差异来自统计规则、运行环境、统计时机三个维度的不同，具体成因如下：

• 运行环境差异：Lighthouse 运行在无任何第三方扩展的纯净 Chromium 实例中，不会统计各类扩展注入的 DOM 元素。你在本地浏览器控制台执行统计时，安装的广告拦截、密码管理、网页翻译等扩展通常会向页面插入隐藏的额外 DOM，这部分元素会被document.getElementsByTagName('*')捕获，但不会出现在 Lighthouse 的统计结果中。
• 统计规则差异：Lighthouse 统计 DOM 数量时，会排除<noscript>标签内部的所有元素——这类元素仅在浏览器禁用脚本时才会渲染生效，正常启用脚本的场景下不会参与页面布局和渲染，因此不计入统计。而document.getElementsByTagName('*')会将<noscript>内部的所有子元素都纳入计数。
• 统计时机差异：Lighthouse 固定在页面完成核心加载、最大内容绘制（LCP）触发的时刻统计 DOM，此时懒加载的动态内容、仅交互后才触发的悬浮层、弹窗等 DOM 还未被插入到页面树中。你手动执行统计命令时通常已经晚于这个时机，页面可能已经加载完所有懒加载内容，或是部分交互触发的 DOM 已经完成挂载，导致统计数值更高。

如果要验证两者的一致性，可以打开浏览器无痕模式、禁用所有扩展，在页面刚完成加载的瞬间执行统计命令，得到的数值会和 Lighthouse 结果基本一致。

内容的提问来源于stack exchange，提问作者UntitledGraphic