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

Question

我想知道 1.) 10,000 tablerow 可见 2.) 10,000 tablerow 使用 display:none 隐藏是否有区别

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

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

Answer 1

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

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

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

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