一眼识别嵌套过深结构：打开DevTools→Elements面板，Ctrl+Shift+F搜索<div>，右键任一匹配项选“Break on subtree modifications”，刷新或交互，若某层从未修改且无CSS规则（用div[class]查无样式），即为冗余；CMS/低代码导出的无绑定<div data-id>等可直接删。
怎么一眼识别嵌套过深的HTML结构
打开 DevTools → Elements 面板，按 Ctrl+Shift+F（Win）或 Cmd+Shift+F（Mac）全局搜索 <div>，再手动点开任意一个匹配项，右键 → “Break on subtree modifications”，然后刷新页面或触发关键交互。如果某层 <code><div> 在整个过程中从未被修改、也无对应 CSS 类生效（用 <code>div[class] 搜索后查不到样式规则），它大概率是冗余包裹。
特别注意 CMS 或低代码平台导出的 HTML，常见 <div data-id="xxx">、<code><div class="block-wrapper-2024"> 这类标签——只要没 JS 绑定、没实际样式作用，直接删。<ul>
<li>DOM 节点每增加 100 个，解析拖慢 20–40ms；5 层嵌套的按钮比单个 <code><button></button> 多花约 60ms
Coverage 面板（Cmd+Shift+P 输入 Coverage 启用）验证 CSS 类是否真实命中<header></header>、<nav></nav> 的解析路径更短，浏览器会做轻量预判，而同级 <div> 会让解析器反复回溯<h3>模板引擎残留怎么批量清理</h3>
<p>跨平台编译常把模板语法硬塞进最终 HTML，比如 <code>{{header}}、{% include "footer.html" %}、@@include("nav.html")，它们不报错，但干扰 DOM 构建顺序，尤其在 SSR 场景下可能引发隐性阻塞。
直接全局搜索以下字符串并删除整行（含起始与结束符）：{{、{%、<!--#、@@include。连带删掉形如 <!-- START: hero-section --> / <!-- END: hero-section --> 的区块注释——除非你真用构建工具做条件注入，否则纯属噪音。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<!--[if IE]>这类条件注释已无必要，2026 年所有主流浏览器都基于 Chromium 或 WebKit，IE 已终止支持 - 空注释
<!-- -->或单行注释<!-- debug only -->也要清，千行注释 ≈ 多花 3–8ms 解析时间 - 模板残留常和真实 DOM 混在一起，比如
<div class="card">{{title}}</div>，删完后务必检查class是否还匹配样式
语义化替换时容易踩的坑
把 <div class="main-header"> 换成 <code><header class="main-header"></header> 是对的，但别混用：不能写 <section><div>
<h2>，<code><h2></h2> 必须是 <section></section> 的直接子元素；否则语义断裂，辅助技术与搜索引擎会误判结构。
常见错误是把 <div class="nav-list"> 直接改成 <code><nav class="nav-list"></nav>，却忘了删掉里面多余的 <div class="list-item"> 包裹——<code><nav></nav> 下应直接放 <a></a> 或 <ul><li></ul>，而非又一层容器。
-
<main></main>只能出现一次，且不应被<article></article>或<section></section>包裹 -
<aside></aside>不等于“右边栏”，而是语义上“与主内容相关但可独立存在”的内容，比如侧边引用、作者简介 - 用
<figure></figure>+<figcaption></figcaption>替代<div class="img-wrap">，不仅语义清晰，还能触发浏览器对图片加载的优化预判<h3>动态内容插入怎么避免 DOM 树失衡</h3> <p>列表类内容（比如商品卡片、文章摘要）一旦超过 50 项，就别一次性塞进一个 <code><ul id="list-root"></ul>——浏览器解析耗时陡增，滚动卡顿明显。正确做法是拆成独立 HTML 片段，用fetch()+insertAdjacentHTML按需加载。首次只留占位节点：
<ul id="list-root"></ul>，后续分批插入。若必须服务端渲染，至少按逻辑块切分，每个<section></section>控制在 30–40 个子元素内，避免单个容器子节点破百。- 不要用
innerHTML = ...批量替换，会触发完整重排；优先用insertAdjacentHTML('beforeend', ...) - 大量动态插入时，用
DocumentFragment缓存节点再一次性 append，比逐个 addChild 快 3–5 倍 - 检查
document.querySelectorAll是否在循环里重复调用，这种写法会让 DOM 查询变成 O(n²) 级别开销
删掉没用的嵌套比加任何优化都直接有效。真正难的不是发现冗余，而是判断某个
<div> 到底有没有被 JS 或 CSS 实际依赖——得靠 Coverage 面板和断点验证，而不是凭经验猜。</div> - 不要用
