核心是将“画布”搬离浏览器渲染流，用DocumentFragment承载嵌套结构再一次性挂载；或用innerHTML字符串拼接；或先detach再操作；避免读写混杂触发隐式回流。
插入多层嵌套节点时避免多次重绘，核心是**把“画布”搬离浏览器渲染流**——不让中间状态暴露给渲染引擎。只要节点没挂到真实 DOM 树上，浏览器就不会计算布局、不会重绘。关键不是“怎么嵌套”，而是“什么时候挂上去”。
用 DocumentFragment 承载整棵嵌套结构
DocumentFragment 是一个轻量、无父节点的离线容器，它不隶属于文档树，往里面反复 appendChild、appendChild、insertBefore 都不会触发任何回流或重绘。
- 先创建 fragment：
const frag = document.createDocumentFragment(); - 再递归/循环构建嵌套结构（比如 ul > li > div > span），全部 append 到 frag 中
- 最后只调用一次
parent.appendChild(frag)或parent.append(frag)
这样无论嵌套 3 层还是 10 层，整个结构只在挂载瞬间触发一次回流（和一次重绘）。
字符串拼接 + innerHTML（适合纯静态内容）
如果嵌套结构不含事件绑定、不依赖 JS 对象引用（如不需要后续用 element.addEventListener），直接拼 HTML 字符串再一次性写入 innerHTML 更快。
立即学习“Java免费学习笔记（深入）”；
- 避免在循环里反复读写
innerHTML += ...（那会反复解析、重建子树） - 正确做法：累积字符串 → 一次性赋值：
el.innerHTML = htmlString; - 示例：
const html = `<ul>${items.map(i => `<li><div><span>${i}</span></div></li>`).join('')}</ul>`;
注意：innerHTML 不会执行脚本、不触发自定义元素升级，且会丢弃已绑定的事件监听器——仅适用于展示型内容。
先 detach 再操作（适合修改已有复杂结构）
若需对页面中已存在的多层嵌套节点做批量增删改（比如清空并重填一个 tree-view），可先用 el.remove() 或 el.parentNode.removeChild(el) 将其完全移出 DOM，操作完成后再插回去。
- 移出后，所有对它的操作（appendChild、removeChild、setAttribute）都不影响渲染
- 特别适合配合递归函数重构 DOM 树，比如展开/折叠菜单、动态加载子节点
- 操作完再
parent.appendChild(el)，同样只触发一次回流
避免“读-写-读”打断渲染队列
即使用了 fragment，如果在构建过程中穿插读取 offsetTop、clientWidth、getBoundingClientRect 等布局信息，仍可能强制同步回流——尤其当之前有未生效的样式写入时。
- 所有读取布局的操作，尽量集中放在构建前（比如提前缓存父容器尺寸）
- 所有写入 DOM 的操作，全部集中在 fragment 上，直到最后才挂载
- 不要在 for 循环里一边
el.style.left = x，一边又console.log(el.offsetWidth)
这种混合读写是隐式强制回流的高发场景，比嵌套层数本身更危险。
