HTML中的元素太多会影响页面性能吗？

Question

我想知道两者之间是否存在差异 1.）10,000个可见的tablerow 2.）使用display：none

隐藏10,000个tablerow

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

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

Answer 1

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

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

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

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

Answer 2

刚开始讨论这个问题并且想把我的2美分也用到

• 即使现代浏览器在快速渲染和更快的情况下变得更聪明 机器越来越快，最好的做法仍然是没有 渲染太多表行。使用分页。
• 它还取决于您呈现表格行的方式。如果你正在使用JS 渲染它，肯定会对滚动产生负面影响 性能。你可以有非常好的js模板解决方案 最小化js执行开销。叫我老派，但我宁愿用 在客户端上渲染的js少。

Answer 3

好问题！ 不是范围太广，讨论得不够。 我正在基于我遇到的延迟加载问题并交叉引用其他网站（如Twitter和Reddit feed）进行研究。

灯塔用DOM树标记页面：

• 总共有1,500个以上的节点。
• 深度大于32个节点。
• 具有一个具有60个以上子节点的父节点。

例如，我发现Reddit的得分 26 令人沮丧。
建议采取的措施包括“避免DOM大小过多1,456个元素”。

Reddit.com：灯塔说：

较大的DOM将增加内存使用量，导致样式更长 计算，并产生昂贵的版图重排。学到更多。反应 考虑使用react-window之类的“窗口”库来最小化 如果要渲染许多重复的对象，则创建的DOM节点数 页面上的元素。学到更多。另外，尽量减少不必要的重新渲染 使用shouldComponentUpdate，PureComponent或React.memo并跳过 仅在使用某些依赖项已更改之前有效 效果挂钩以提高运行时性能。

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