避免 DOM 规模过大
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
大型 DOM 树会以多种方式降低网页性能:
网络效率和负载性能
大型 DOM 树通常包含许多用户首次加载页面时不可见的节点,这会不必要地增加用户的数据费用并延长加载时间。
运行时性能
当用户和脚本与您的页面互动时,浏览器必须不断重新计算节点的位置和样式。大型 DOM 树与复杂的样式规则相结合可能会严重降低渲染速度。
内存性能
如果您的 JavaScript 使用常规查询选择器(例如 document.querySelectorAll('li')
),您可能会在无意中存储了对大量节点的引用,这可能会使用户设备的内存容量超负荷。
Lighthouse DOM 大小审核如何失败
Lighthouse 报告页面的 DOM 元素总数、页面的最大 DOM 深度及其子元素数量上限:
Lighthouse 使用符合以下条件的 DOM 树标记网页:
- 当 body 元素所含的节点超过 800 个左右时发出警告。
- 当 body 元素所含的节点数量超过约 1,400 个时出现的错误。
如何优化 DOM 大小
一般来说,应设法仅在需要时创建 DOM 节点,并在不再需要节点时将其销毁。
如果您要交付大型 DOM 树,请尝试加载页面并手动记录显示的节点。或许您可以从最初加载的文档中移除未显示的节点,并仅在相关用户互动(例如滚动或点击按钮)后创建这些节点。
如果您在运行时创建 DOM 节点,子树修改 DOM 更改断点可以帮助您确定节点的创建时间。
如果您无法避免大型 DOM 树,另一种提高渲染性能的方法是简化 CSS 选择器。如需了解详情,请参阅 Google 的缩小样式计算的范围并降低其复杂性。
有关详情,请参阅 DOM 大小对互动性的影响以及可以采取的措施一文。
针对特定堆栈的指南
Angular
如果您要呈现大型列表,请使用 Component Dev Kit (CDK) 中的虚拟滚动功能。
回应
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-06-21。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-06-21\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-06-21。"],[],[]]