高效更新DOM的JavaScript技巧有哪些

本文深入剖析了JavaScript中高效更新DOM的核心实践，强调避免常见陷阱如滥用innerHTML和字符串拼接类名，推荐以textContent处理纯文本、classList操作样式、setAttribute管理自定义属性，并重点指出DocumentFragment是批量插入的黄金方案——它能显著减少重排重绘，兼顾性能与安全；真正高效的DOM操作不在于代码简洁，而在于精准规避浏览器隐式开销，让每一次更新都可控、快速且无XSS风险。

直接修改 innerHTML 最快，但有安全和性能隐患；真正高效且可控的方式是组合使用 textContent、setAttribute() 和 DocumentFragment。

哪些 DOM 方法适合批量更新元素内容？

单个文本更新优先用 textContent，它比 innerHTML 快且不触发 HTML 解析；批量插入多个节点时，DocumentFragment 能避免重复重排重绘。

• textContent：仅设纯文本，无 XSS 风险，浏览器跳过 HTML 解析，速度最快
• innerText：受 CSS 影响（如 display: none 的元素不计入），性能较差，一般不用
• innerHTML：能插入 HTML，但每次设置都会销毁并重建子节点，触发样式计算和布局，慎用于高频更新
• 批量操作前，先创建 DocumentFragment，把所有新节点 append 进去，最后一次性挂到真实 DOM 上

如何安全又快速地修改元素属性和类名？

直接操作属性比用 setAttribute() 更快，也更语义清晰；类名操作必须用 classList API，而不是拼接字符串。

• 改 id、src、href 等标准属性，直接赋值：el.id = "new-id" 或 el.src = url
• 改自定义属性（data-*）或非标准属性，用 el.setAttribute("data-id", "123")
• 操作 class：用 el.classList.add("active")、.remove()、.toggle()、.contains() —— 不要写 el.className += " active"，会覆盖已有类
• 禁用/启用表单控件：直接设 el.disabled = true，比 setAttribute("disabled", "") 更可靠

为什么 innerHTML += ... 是危险写法？

它会强制浏览器先序列化当前 HTML（变成字符串），再拼接新内容，最后全部重新解析渲染 —— 既慢又可能意外执行内联脚本或破坏事件监听器。

const container = document.getElementById("list");
// ❌ 危险且低效
container.innerHTML += "

Item 1

"; // ✅ 正确做法：用 DocumentFragment 或 createElement const fragment = document.createDocumentFragment(); const li = document.createElement("li"); li.textContent = "Item 1"; fragment.appendChild(li); container.appendChild(fragment);

更新大量列表时，怎样避免卡顿？

核心是减少重排（reflow）和重绘（repaint）次数。不要逐个 appendChild，也不要反复读取 offsetHeight 这类触发布局的属性。

• 用 document.createDocumentFragment() 收集所有新节点，一次插入
• 如果列表项结构固定，考虑用 template 标签 + content.cloneNode(true) 复用结构
• 更新前临时设 container.style.display = "none"，更新完再恢复（适用于非动画场景）
• 极端情况可用 requestIdleCallback() 分片更新，但多数业务中用 createDocumentFragment 已足够

最常被忽略的是：哪怕只改一个文本，也别用 innerHTML；哪怕只加一个 class，也别碰 className 字符串。DOM 操作的“高效”，本质是减少浏览器隐式开销，而不是代码行数少。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《高效更新DOM的JavaScript技巧有哪些》文章吧，也可关注golang学习网公众号了解相关技术文章。