为什么 Google Lighthouse 不计算其 DOM 大小计算的所有 DOM 元素答案

【问题标题】：Why does Google Lighthouse not count all the DOM elements for its DOM size calculation为什么 Google Lighthouse 不计算其 DOM 大小计算的所有 DOM 元素
【发布时间】：2023-03-23 01:53:01
【问题描述】：

我正在研究减小网站 DOM 的大小。当我在一个页面上运行 Lighthouse 时，正确突出显示为过多的 DOM 是 1,824 个元素。然后，当我进入控制台并运行一个小脚本document.getElementsByTagName('*') 时，它返回的HTMLCollection(2212) [HTML, ...] 稍高一些。我假设要么

这两个结果之一不正确 - 在这种情况下
Lighthouse 将某些元素从其计数中排除 - 在这种情况下是什么
别的东西。

有人对此有任何见解吗？

【问题讨论】：

标签： javascript dom lighthouse

【解决方案1】：

Google Lighthouse 仅计算 <body> 中的 DOM 元素。

document.getElementsByTagName('*') 返回 DOM 元素，包括 <head>

【讨论】：

感谢 Dan 这确实发生在我身上，所以我也运行了 $('body *');，仍然超过 2,000。因此，这让我认为，一旦 DOM 加载，Lighthouse 总数可能会停止计数，之后可能加载的任何内容都不包含在总数中，而在控制台中摆弄可能会捡起它。这听起来可行吗？
Lighthouse 会加载多个页面来进行分析。我能够在我的一个网站的几个不同页面上重现结果。那些是相当静态的，而那些是动态的，并且在页面加载后可以很好地加载内容。只要我使用querySelectorAll("body *")，它似乎是一致的。我还没有用 jQuery 尝试过，看看它是否返回相同的结果。
querySelectorAll 返回与 jQuery 等效项相同的结果——我很懒惰。看起来我的主要差异是移动设备和桌面设备之间的差异。我没有考虑过灯塔的设置。他们仍然不完全匹配，但相当接近