8

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

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

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

4

3 回答 3

6

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

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

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

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

于 2016-10-11T16:04:36.780 回答
2

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

  • 尽管现代浏览器在快速渲染方面变得更加智能并且机器变得越来越快，但最好的做法仍然是不渲染太多表格行。使用分页。
  • 它还取决于您如何呈现表格行。如果你使用 JS 来渲染它，肯定会对滚动性能产生负面影响。有非常好的 js 模板解决方案可以最小化 js 执行开销。称我为老派，但我宁愿在客户端使用较少的 js 渲染。
于 2018-01-03T19:35:20.300 回答
2

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

Lighthouse 使用 DOM 树标记页面：

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

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

Reddit.com：灯塔 说：

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

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

于 2020-10-09T16:48:06.050 回答