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

Question

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

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

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

Answer 1

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

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

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

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