核心思路是减少浏览器重排和重绘次数。用DocumentFragment批量操作、缓存DOM查询结果、innerHTML字符串拼接、离线操作模式，可显著提升性能。
核心思路是减少浏览器重排（Reflow）和重绘（Repaint）的次数。每次直接操作真实 DOM，都可能触发这些开销巨大的渲染流程；把操作“攒起来”，一次性提交，性能提升最明显。
用 DocumentFragment 批量构建再插入
这是最常用也最有效的做法。DocumentFragment 是一个轻量级的内存节点容器，往它里面添加、修改元素不会引起页面重排重绘。
- 先创建 document.createDocumentFragment()
- 在 fragment 中循环创建并追加所有新节点（
createElement+appendChild） - 最后只调用一次 真实父容器.appendChild(fragment)
比如渲染 1000 条列表项，原来要触发 1000 次重排，现在仅 1 次 —— 实测性能可提升 80% 以上。
缓存 DOM 查询结果，避免重复查找
像 document.getElementById、querySelector 这类方法每次执行都要遍历 DOM 树，开销不小。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 把高频使用的元素引用提前存到变量里，例如：const list = document.getElementById('myList');
- 后续所有操作都基于这个缓存变量，不再反复查 DOM
- 尤其在事件回调、定时器或循环中，这点特别关键
改用 innerHTML 字符串拼接（适合简单结构）
当插入内容纯文本或结构固定时，字符串拼接 + 一次赋值比逐个创建元素更快。
- 用数组
push拼接 HTML 字符串，再用 element.innerHTML = htmlString - 注意：需确保内容可信，避免 XSS；不适用于需要绑定事件或保留引用的复杂场景
- 对 500+ 条简单项的列表渲染，比逐个
appendChild更快
必要时启用离线操作模式
对已有大块内容做频繁更新，可先让元素脱离文档流，改完再放回。
- 用 element.style.display = 'none' 或 element.remove() 暂时移除
- 完成所有 DOM 修改后，再重新插入或显示
- 适合表格重绘、复杂表单批量刷新等场景
