摘要：按需渲染：仅在用户实际需要时才渲染DOM节点。例如，对于页面中的折叠面板内容，初始时只渲染标题，用户点击展开时再动态创建并添加面板中的详细内容。可以使用JavaScript监听点击事件，然后动态创建和添加相关DOM节点。虚拟列表：在处理大量列表数据时，采用虚拟
当 DOM 节点过多时，可能会导致页面渲染性能下降、内存占用增加等问题。以下是一些针对这种情况的优化方法：
按需渲染 ：仅在用户实际需要时才渲染DOM节点。例如，对于页面中的折叠面板内容，初始时只渲染标题，用户点击展开时再动态创建并添加面板中的详细内容。可以使用JavaScript监听点击事件，然后动态创建和添加相关DOM节点。虚拟列表 ：在处理大量列表数据时，采用虚拟列表技术。只渲染当前可见区域以及附近的少量DOM节点。例如，在滚动加载列表中，只渲染屏幕可视范围内的列表项，当用户滚动时，动态调整渲染的列表项。像一些知名的电商商品列表页，向下滚动时不断加载新的商品DOM元素就是利用的这种思想。简洁的嵌套层级 ：保持DOM结构尽可能扁平简单，减少不必要的嵌套层级。例如，将一些不必要的div或span标签去掉，合并它们的样式和 #技术分享功能。合理使用documentFragment ：DocumentFragment是文档片段，在内存中操作它，然后一次性将其附加到DOM树中。这样可以减少DOM更新的次数，提高效率。比如说要向一个容器中添加多个列表项，可以先将这些列表项创建到DocumentFragment中，最后再将DocumentFragment append到DOM节点上，从而减少浏览器重排和重绘的次数。批量更新CSS ：通过将多个CSS属性合并成一个类，一次性应用到DOM节点上，而不是多次单独修改CSS属性。例如，如果要修改一个元素的颜色、字体大小和背景颜色，创建一个包含这些样式的类，然后直接应用这个类到元素上，而不是分别设置每个属性。避免内联CSS ：内联CSS会增加HTML的体积，且不易维护和缓存。尽量将CSS样式提取到外部样式表中。图片懒加载 ：对于页面中不在可视区域的图片，采用懒加载技术。当图片进入可视区域时，再加载图片内容。可以使用第三方库如LazyLoad或Intersection Observer API来实现 。例如在一个长网页中，用户在滚动浏览过程中，图片组件在快显示的时候触发加载逻辑，这样就不会一次性加载大量图片，减少了DOM和资源使用。脚本懒加载 ：非必要的脚本可以设置为懒加载。在HTML中的 标签上使用 async 或 defer 属性， async 属性会使脚本在下载完成后立即执行，不会阻塞文档的解析； defer 属性会使脚本在文档解析完成后、DOMContentLoaded事件触发前执行，这样可以防止脚本加载影响页面渲染，尤其是在脚本数量较多的情况下。分析工具 ：使用浏览器开发者工具（如Chrome DevTools）来分析页面性能。利用Performance面板可以看到各项性能指标，比如时间线分析，能查看渲染过程中的瓶颈。通过这些工具判断性能问题主要出现在DOM加载、渲染还是脚本执行环节，针对性进行优化。代码压缩工具 ：在项目构建过程中，使用代码压缩工具（如UglifyJS、CSSNano等）对HTML、CSS和JavaScript代码进行压缩，减少文件体积，提高加载速度。在 JavaScript 中，有多种方法可以监控 DOM 节点的数量。以下是一些常见的方式：
直接计算 ：可以使用 document 对象的 querySelectorAll 方法选择所有的DOM节点，然后获取其 length 属性。例如：function countAllNodes { const allNodes = document.querySelectorAll('*'); const nodeCount = allNodes.length; console.log(`当前DOM节点数量为: ${nodeCount}`);}countAllNodes;如果只关心特定类型的节点，可以在 querySelectorAll 的选择器中指定类型。比如，要统计所有 div 元素的数量：function countDivNodes { const divNodes = document.querySelectorAll('div'); const divNodeCount = divNodes.length; console.log(`当前div节点数量为: ${divNodeCount}`);}countDivNodes;MutationObserver 监听节点变化 ：MutationObserver 是HTML5新增的特性，它可以观察DOM的变化。通过监听 childNodes 的变化，就可以监控节点数量的增减。例如：const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childNodes') { const allNodes = document.querySelectorAll('*'); const nodeCount = allNodes.length; console.log(`当前DOM节点数量变为: ${nodeCount}`); } }});const config = { childList: true, subtree: true };observer.observe(document.documentElement, config);在上述代码中，MutationObserver 监听 document.documentElement （即 HTML 根元素）及其子树的 childNodes 变化。一旦有变化发生，就重新计算所有 DOM 节点的数量并打印出来。
来源：墨码行者