DocumentFragment批量插入更快是因为它将N次重排压缩为1次，而非创建节点快；其作为离线容器，所有操作不触发渲染，仅最后插入时统一布局。

DocumentFragment 批量插入为什么比循环appendChild快

不是因为“创建节点快”，而是浏览器每调用一次 appendChild 到已挂载的 DOM，就可能触发一次重排（reflow）——尤其当父容器有 CSS 布局依赖（如 flex、grid、float）时。而 DocumentFragment 是离线节点，所有 appendChild 都不走渲染管线，只在最后 container.appendChild(fragment) 时统一计算一次布局和绘制。

• 别在循环里写 container.appendChild(div) 100 次；应先 const frag = document.createDocumentFragment()，再批量 frag.appendChild(div)，最后单次插入
• fragment 插入后自动清空，不可复用；需多批操作时，每次新建
• 对已有列表追加少量项，insertAdjacentHTML('beforeend', htmlString) 比 innerHTML += 安全且高效——后者会强制序列化+全量重建子树

为什么读取 offsetHeight 后立刻改样式会卡顿

这是典型的“强制同步布局”（forced reflow）：浏览器为返回 offsetHeight，必须立即完成当前所有待处理的样式计算和布局，打断正常渲染流水线。若紧接着又改 style.width 或 className，它就得再算一遍——两次布局叠加，主线程直接堵死。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 所有会触发同步布局的属性： offsetWidth、offsetHeight、getBoundingClientRect()、scrollHeight、clientTop 等
• 正确做法是“读一批、写一批”：先遍历收集所有需要读取的值（如 els.map(el => el.offsetHeight)），再统一修改样式或类名
• 滚动监听里反复查 el.offsetTop 是高频雷区；改用 IntersectionObserver 或缓存位置值

DOM 深度超过 3 层为什么比节点总数更危险

浏览器构建渲染树时，每个父节点都要为子节点做样式继承、属性回溯、布局上下文创建。深度每 +1，这些嵌套开销就翻倍；而 100 个同级 div 的扁平结构，远比 10 个嵌套 5 层的结构轻量。

• 真实项目中高频冗余嵌套：<div><div><div><input></div></div></div> 替代语义化的 <label class="input-group"><input></label>
• CSS 选择器从右往左匹配，.deep .nested .wrapper .content 要逐层向上验证父链，DOM 深度越大，失败回溯成本越高
• 用 display: grid + grid-template-areas 替代多层包裹；用伪元素 ::before 替代 <div class="divider">；SVG 图标内联，不套三层 <code>div

  服务端渲染（SSR）时 DOM 深度怎么悄悄超标

  模板引擎自动生成的 wrapper 层最容易堆出无效深度：比如 <div class="page"><div class="main"><div class="container"><div class="row"><div class="col">，实际只有一处用到 <code>col 类，其余全是冗余。

  立即学习“前端免费学习笔记（深入）”；

  • 检查 DevTools → Elements 面板，Ctrl+F 搜 <div></div> 或空 class=""，结合 Coverage 面板看哪些 CSS 规则未命中
  • Vue/React 中慎用 v-html 或 dangerouslySetInnerHTML 渲染整段 HTML——它可能带入深层嵌套，优先用组件化结构控制输出
  • SSR 输出时过滤掉无意义的 data 属性节点，如 <div data-v-xxx="">，它们仍计入 DOM 树并参与样式计算 真正卡顿的从来不是“DOM 多”，而是“DOM 操作方式让浏览器反复掐断渲染节奏”。深度优化不是删标签，是让每一次插入、读取、样式切换，都落在浏览器渲染帧的空隙里。</div>