HTML中的元素过多会影响页面性能吗？答案

【问题标题】：is too many element in the HTML can affect the page performance?HTML中的元素过多会影响页面性能吗？
【发布时间】：2015-12-23 02:12:59
【问题描述】：

我想知道两者之间是否有区别 1.) 10,000 个可见的 tablerow 2.) 使用 display:none 隐藏的 10,000 个表格行

我想知道的是。如果页面上所有 10,000 行都可见，是否会导致页面滚动滞后？

但如果我隐藏例如其中的 9000 个。这可以减少滞后吗？多谢你们。

【问题讨论】：

不是一个答案，而是一个观察，如果你需要一次加载 10,000 行，你可能做错了。
您可能应该进行某种形式的分页。正如卢克所说 - 你可能做错了。您还应该能够轻松地自己测试这一点，因为如果您知道如何制作一行，那么您可以使用 for 循环制作 10,000 个。
你的问题很广泛。没有足够的信息来回答您的问题。它是一个简单的 3 列表，每个单元格中有一些 5 位数字，那么答案是除了使用 PC 时的初始加载之外没有区别。规模的另一端是如果表格是 40 列宽并且每个单元格都有唯一的 JavaScript 代码来生成每个单元格的图形内容，我想它可能会通过隐藏大部分单元格来改进滚动。另外，您做了什么来找出答案，以免其他人浪费时间？

标签： html dom element web-performance

【解决方案1】：

一般display: none; 会为浏览器节省一些工作。

浏览器将首先解析您的 HTML 并构建所谓的 DOM（文档对象模型），当收到所有 CSS 后，它会继续构建 CSSOM（CSS 对象模型）。这两者结合将给出渲染树。

有了渲染树，浏览器将执行布局步骤（决定每个元素在屏幕上的位置和大小），然后在屏幕上绘制页面。

然而，当将 DOM 和 CSSOM 组合成渲染树时，浏览器将丢弃所有 display: none; 的子树，因此在布局和绘制步骤中要做的工作更少。

【讨论】：

【解决方案2】：

刚遇到这个问题，也想投入我的 2 美分

即使现代浏览器在快速渲染和机器越来越快，最佳实践仍然存在渲染太多表格行。使用分页。
这还取决于您如何呈现表格行。如果你使用 JS 来渲染它，肯定会对滚动产生负面影响表现。有非常好的 js 模板解决方案可以最小化 js 执行开销。叫我老派，但我宁愿使用客户端上的 js 渲染更少。

【讨论】：

【解决方案3】：

好问题！它没有太宽泛，它没有得到足够的讨论。我正在根据我遇到的延迟加载问题和交叉引用其他网站（如 Twitter 和 Reddit 提要）对此进行研究。

Lighthouse 使用 DOM 树标记页面：

总共有 1,500 多个节点。
深度大于 32 个节点。
有一个父节点，子节点超过 60 个。

例如，我看到 Reddit 的分数很差 26。
“避免使用过多的 DOM 大小 1,456 元素”作为推荐操作。

Reddit.com：灯塔说：

一个大的 DOM 会增加内存使用，导致更长的样式计算，并产生昂贵的布局回流。学到更多。反应考虑使用像react-window 这样的“窗口”库来最小化如果您要渲染许多重复的，则创建的 DOM 节点的数量页面上的元素。学到更多。此外，尽量减少不必要的重新渲染使用 shouldComponentUpdate、PureComponent 或 React.memo 并跳过如果您正在使用，则仅在某些依赖项发生更改之前生效用于提高运行时性能的 Effect 挂钩。

https://web.dev/dom-size/#how-to-optimize-the-dom-size

【讨论】：