Chrome DevTools 中通过 node.depth 定位超深节点，≥7 需优化，≥10 触发解析器保护；删包裹型 div 前须验证事件、样式、JS 引用；CMS 三件套通常仅留最内层；Grid/Flex 替代嵌套需避免伪扁平；语义标签替换须检查行为差异；扁平化需同步重构选择器与遍历逻辑。
用 Chrome DevTools 直接查 node.depth 定位超深节点
别数缩进，也别猜“是不是太深了”。打开 Chrome DevTools → Elements 面板 → 右键任意元素 → Show DOM properties → 看 node.depth 值：≥7 就该动手，≥10 已触发解析器保护机制，部分节点可能根本没进 DOM 树。
快速扫描全页深度：在 Console 运行
document.querySelectorAll('div div div div div div').length
返回值 > 0 就说明存在 ≥6 层嵌套的 div 链，优先从这些路径入手。
删掉纯包裹型 div 前先验证它有没有实际职责
一个 div 能不能删，不看 class 名，只看三件事：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 有没有绑定
addEventListener（查 Event Listeners 面板） - CSS 面板里搜它的 class 或 id，是否真有生效样式（没样式又没 JS 绑定 = 白占位）
- 是否被 JS 用
querySelector或getElementById显式引用（全局搜索字符串，别漏掉模板字符串和动态拼接）
特别注意 CMS/低代码输出的“三件套”：div.wrapper > div.container > div.row，通常只留最内层 div.row 即可，外两层无语义、无样式、无 JS 依赖——直接删。
用 CSS Grid/Flex 替代嵌套时避开“伪扁平”陷阱
把 HTML 里三层 div 改成一层 div + display: grid 是有效手段，但容易踩两个坑：
- grid 容器内再塞
div class="card"><div class="card-body">...</div></div> —— DOM 层级没变，只是把嵌套从 HTML 搬到了视觉逻辑里</li> <li>用 <code>grid-template-areas
写整页布局没问题，但拿它去排一个带图标+文字+下拉箭头的按钮，反而让 CSS 更难维护、渲染更慢
真实边界很朴素：display: grid 适合替代页面级分区（header/main/aside），display: flex 适合组件内对齐（input+button、nav-item+icon）。别为了“扁平”硬套。
语义标签不是装饰，替换后必须检查默认行为差异
把 <div class="main"> 换成 <code><main></main> 很快，但浏览器对 <main></main> 有隐式约束：<main></main> 必须且只能出现一次，不能嵌套在 <article></article> 或 <section></section> 内。否则：
- 辅助技术（NVDA/VoiceOver）可能跳过或误读内容流
- CSS 选择器如
main .title在某些旧版 Safari 中匹配异常 -
document.querySelector('main')返回 null，哪怕 HTML 里写了——因为解析器已静默降级为div
真正容易被忽略的点：删掉五层嵌套后，如果 JS 还在用 el.parentNode.parentNode.parentNode.querySelector('.content') 这种硬写路径的方式取元素，运行时就直接报错。扁平结构要求选择器和遍历逻辑同步重构，不是只改 HTML。
