HTML中的元素太多会影响页面性能吗？
is too many element in the HTML can affect the page performance?
我想知道两者之间是否有区别
1.) 10,000 个可见的表格行
2.) 使用 display:none
隐藏的 10,000 个表格行
我想知道的是。如果10,000行都在页面上可见，是否会导致页面滚动滞后？
但是如果我隐藏例如其中的 9000 个。这可以减少滞后吗？谢谢你们。
一般来说 display: none; 会为浏览器节省一些工作。
浏览器将首先解析您的 HTML 并构建所谓的 DOM（文档对象模型），当收到所有 CSS 后，它将继续构建CSSOM（CSS 对象模型）。这两个组合将给出渲染树。
有了呈现树，浏览器将执行布局步骤（决定每个元素在屏幕上的位置以及它的大小），然后在屏幕上绘制页面。
当组合 DOM 和 CSSOM 成为渲染树时，浏览器将丢弃所有 display: none; 的子树，因此，在布局和绘画步骤。
刚 运行 进入这个问题，也想投入我的 2 美分
- 尽管现代浏览器在快速渲染和
机器越来越快，最佳实践仍然有效
呈现太多 table 行。使用分页。
- 它还取决于您呈现 table 行的方式。如果你使用 JS
render它，肯定会对scroll产生负面影响
表现。您可以使用非常好的 js 模板解决方案
最小化 js 执行开销。叫我老派，但我宁愿使用
减少客户端上的 js 渲染。
好问题！ 不是太宽泛，讨论得不够。
我正在根据我遇到的 lazy-loading 问题和 cross-referencing Twitter 和 Reddit 提要等其他网站进行研究。
Lighthouse 标记具有 DOM 棵树的页面：
- 总共有超过 1,500 个节点。
- 深度大于 32 个节点。
- 有一个父节点有超过 60 个子节点。
例如，我看到 Reddit 得分惨淡 26.
“避免超过 DOM 大小的 1,456 个元素”作为推荐操作包括在内。
Reddit.com：灯塔说：
A large DOM will increase memory usage, cause longer style
calculations, and produce costly layout reflows. Learn more. React
Consider using a “windowing” library like react-window to minimize
the number of DOM nodes created if you are rendering many repeated
elements on the page. Learn more. Also, minimize unnecessary re-renders
using shouldComponentUpdate, PureComponent, or React.memo and skip
effects only until certain dependencies have changed if you are using
the Effect hook to improve runtime performance.
我想知道两者之间是否有区别 1.) 10,000 个可见的表格行 2.) 使用 display:none
隐藏的 10,000 个表格行我想知道的是。如果10,000行都在页面上可见，是否会导致页面滚动滞后？
但是如果我隐藏例如其中的 9000 个。这可以减少滞后吗？谢谢你们。
一般来说 display: none; 会为浏览器节省一些工作。
浏览器将首先解析您的 HTML 并构建所谓的 DOM（文档对象模型），当收到所有 CSS 后，它将继续构建CSSOM（CSS 对象模型）。这两个组合将给出渲染树。
有了呈现树，浏览器将执行布局步骤（决定每个元素在屏幕上的位置以及它的大小），然后在屏幕上绘制页面。
当组合 DOM 和 CSSOM 成为渲染树时，浏览器将丢弃所有 display: none; 的子树，因此，在布局和绘画步骤。
刚 运行 进入这个问题，也想投入我的 2 美分
- 尽管现代浏览器在快速渲染和 机器越来越快，最佳实践仍然有效 呈现太多 table 行。使用分页。
- 它还取决于您呈现 table 行的方式。如果你使用 JS render它，肯定会对scroll产生负面影响 表现。您可以使用非常好的 js 模板解决方案 最小化 js 执行开销。叫我老派，但我宁愿使用 减少客户端上的 js 渲染。
好问题！ 不是太宽泛，讨论得不够。 我正在根据我遇到的 lazy-loading 问题和 cross-referencing Twitter 和 Reddit 提要等其他网站进行研究。
Lighthouse 标记具有 DOM 棵树的页面：
- 总共有超过 1,500 个节点。
- 深度大于 32 个节点。
- 有一个父节点有超过 60 个子节点。
例如，我看到 Reddit 得分惨淡 26.
“避免超过 DOM 大小的 1,456 个元素”作为推荐操作包括在内。
Reddit.com：灯塔说：
A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn more. React Consider using a “windowing” library like
react-windowto minimize the number of DOM nodes created if you are rendering many repeated elements on the page. Learn more. Also, minimize unnecessary re-renders using shouldComponentUpdate, PureComponent, or React.memo and skip effects only until certain dependencies have changed if you are using the Effect hook to improve runtime performance.