我想知道以下两种情况是否有区别：
1. 显示10,000个表格行。
2. 使用display:none隐藏10,000个表格行。
我想了解的是，如果页面上所有10,000行都可见，是否会导致页面滚动出现延迟？
但是，如果我将其中的9,000个行隐藏起来，这能减少页面滞后吗？谢谢。
我想了解的是，如果页面上所有10,000行都可见，是否会导致页面滚动出现延迟？
但是，如果我将其中的9,000个行隐藏起来，这能减少页面滞后吗？谢谢。
过多的 HTML 元素会影响页面性能吗？
8
- Arjay Bonus
3
1这不是一个答案，而是一个观察，如果你需要一次性加载10,000行数据，那么你可能做错了。 - Luke Joshua Park
你可能应该做一些分页处理。正如Luke所说 - 你可能做错了。你应该能够很容易地为自己进行测试，因为如果你知道如何创建一行数据，那么你可以使用for循环创建10,000个。 - Matt Geyer
你的问题太广泛了。没有足够的信息来回答你的问题。如果它只是一个简单的三列表格，每个单元格中都有一些5位数字，那么答案是在使用PC时除了初始加载之外不会有任何影响。另一方面，如果这个表格有40列，每个单元格都有独特的JavaScript代码来生成每个单元格的图形内容，我想这可能会通过隐藏大部分单元格来改善滚动。此外，你已经做了什么来找到答案以避免别人浪费时间？ - Trevor
3个回答
7
一般来说，
浏览器首先解析您的 HTML 并构建所谓的 DOM（文档对象模型），当所有 CSS 都接收到后，它将继续构建 CSSOM（CSS 对象模型）。这两者结合起来将形成渲染树。
有了渲染树之后，浏览器将执行布局步骤（决定每个元素在屏幕上的位置和大小），然后绘制页面在屏幕上。
然而，当将 DOM 和 CSSOM 结合成为渲染树时，浏览器会丢弃所有具有
display: none; 可以使浏览器减少一些工作量。浏览器首先解析您的 HTML 并构建所谓的 DOM（文档对象模型），当所有 CSS 都接收到后，它将继续构建 CSSOM（CSS 对象模型）。这两者结合起来将形成渲染树。
有了渲染树之后，浏览器将执行布局步骤（决定每个元素在屏幕上的位置和大小），然后绘制页面在屏幕上。
然而，当将 DOM 和 CSSOM 结合成为渲染树时，浏览器会丢弃所有具有
display: none; 的子树，从而在布局和绘制步骤中需要做更少的工作。- Erik
3
非常好的问题！它不是太宽泛，也没有被讨论得足够多。我正在进行研究，基于lazy-loading问题和与Twitter和Reddit feeds等其他网站的交叉引用。
Lighthouse会标记DOM树具有以下特点：
- 拥有超过1500个节点。
- 深度大于32个节点。
- 父节点拥有超过60个子节点。
例如，我发现Reddit的分数惨淡的26。
"Avoid an excessive DOM size 1,456 elements"被列为推荐措施之一。
Reddit.com：Lighthouse显示：
DOM过大会增加内存使用量、导致更长的样式计算，并且产生昂贵的布局回流。了解更多信息。React考虑如果您正在渲染许多重复元素的页面，则使用类似于
react-window这样的“窗口化”库来最小化创建的DOM节点数量。详细了解。此外，如果您使用Effect hook来提高运行时性能，则应仅在特定依赖项更改时跳过效果，并使用shouldComponentUpdate、PureComponent或React.memo来最小化不必要的重新呈现。
- Ben Racicot
2
有没有任何纯JS的替代方案可以取代React-Window？谢谢。 - Mike Casan Ballester
2我从不使用React，但我添加了这个语句，是因为在这里有人争论这个问题是无关紧要的。我建议不要使用任何自动化工具来最小化DOM节点输出，而是找出如何手动输出较少的HTML，例如虚拟DOM滚动。 - Ben Racicot
2
我刚遇到这个问题，想要发表我的看法
- 尽管现代浏览器变得更加智能且机器运行速度更快，但最佳实践仍然是不要渲染太多的表格行。使用分页。
- 这也取决于你如何渲染你的表格行。如果你使用JS来渲染它，它肯定会对滚动性能产生负面影响。有一些非常好的js模板解决方案可以减少js执行开销。虽然可能有点老派，但我更喜欢在客户端上使用较少的js渲染。
- Devrim
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接