删掉没用的嵌套比加优化更直接有效：dom节点每增100个拖慢解析20–40ms；用devtools断点、css选择器检查冗余div；删除cms/低代码无用占位符；用语义化标签替代无意义容器；清除模板残留和空注释。
删掉没用的嵌套，比加优化更直接有效DOM节点数每增加100个，平均会拖慢解析20–40ms。很多页面的“百毫秒级延迟”就卡在层层包裹的 <div> 上——比如一个按钮被套了5层 <code><div class="container"><div class="wrapper"><div class="inner"><div class="content"><div class="btn-wrapper">，而实际只需要 <code><button class="btn"></button>。
- 打开 DevTools → Elements 面板，右键任意父级
<div> → “Break on subtree modifications”，然后交互触发渲染，看哪些包裹层根本没参与样式或逻辑<li>用 CSS 选择器搜索 <code>div[class]，逐个检查是否真有对应样式规则；没有匹配的 class 名，连带整个标签一并删除
- 特别注意 CMS 或低代码平台导出的 HTML，常带大量
<div data-id="xxx"> 类型占位符——只要没 JS 绑定，全删<h3>用语义化标签替代无意义容器，浏览器解析快一拍</h3>
<p>浏览器对 <code><header></header>、<nav></nav>、<article></article> 等语义标签的解析路径更短，且现代引擎会对它们做轻量级预判优化。而一堆同级 <div> 会让解析器反复回溯确认层级关系。<ul>
<li>把 <code><div class="main-header">...</div> 直接换成 <header></header>，类名保留（用于样式），标签改掉
<div class="nav-list"> → <code><nav></nav>，<div class="card-body"> → <code><article></article> 或 <section></section>，视内容语义而定- 避免混用：不要写
<section><div>
<h2>，<code><h2></h2> 应该直接子级于 <section></section>移除模板残留和空注释块，别让它们白占解析时间
注释本身不渲染，但浏览器仍需逐字读取、跳过。千行注释 ≈ 多花 3–8ms 解析时间；更麻烦的是模板语法残留（如 {{header}}），它们虽不报错，却干扰 DOM 构建顺序，尤其在 SSR 或静态生成场景下容易引发隐性阻塞。
- 全局搜索
{{、{%、、<code>@@include，连同对应结束符（如 }}、%}）全部删净
- 删掉形如
<!-- START: hero-section --> / <!-- END: hero-section --> 的区块注释——除非你真用构建工具做条件注入，否则纯属噪音
-
<!--[if IE]>...<![endif]--> 全部删除，2026 年已无兼容必要
动态加载非首屏列表，砍掉 DOM 节点数最狠的一刀
一个含 200 条目的 <ul></ul> 列表，光 HTML 字符就超 15KB，DOM 节点轻松破千。浏览器解析它比加载一个 JS 文件还慢。这类内容必须延迟构建，而非塞进初始 HTML。
- 把列表 HTML 拆成独立文件（如
/data/list-1.html），用 fetch() + insertAdjacentHTML 动态插入，首次只留占位 <ul id="list-root"></ul>
- 别用 jQuery
.load() —— 它默认执行内联脚本，易引发重复绑定或执行时序错乱；原生 fetch 更可控
- 滚动到可视区再加载（intersectionObserver），比 onload 后统一加载更省资源；但注意首次交互前要预加载关键项，避免“点开空白”
真正卡住百毫秒级解析的，往往不是算法或网络，而是你没删干净的那几个 <div>、没清理的模板注释、或者硬塞进 HTML 的整页列表。优化不是加东西，是持续剔除——每次删完，F5 刷新看 Performance 面板的 Parse HTML 时间是否往下掉 10ms，就说明动对地方了。</div>
DOM节点数每增加100个，平均会拖慢解析20–40ms。很多页面的“百毫秒级延迟”就卡在层层包裹的 <div> 上——比如一个按钮被套了5层 <code><div class="container"><div class="wrapper"><div class="inner"><div class="content"><div class="btn-wrapper">，而实际只需要 <code><button class="btn"></button>。
- 打开 DevTools → Elements 面板，右键任意父级
<div> → “Break on subtree modifications”，然后交互触发渲染，看哪些包裹层根本没参与样式或逻辑<li>用 CSS 选择器搜索 <code>div[class]，逐个检查是否真有对应样式规则；没有匹配的class名，连带整个标签一并删除 - 特别注意 CMS 或低代码平台导出的 HTML，常带大量
<div data-id="xxx"> 类型占位符——只要没 JS 绑定，全删<h3>用语义化标签替代无意义容器，浏览器解析快一拍</h3> <p>浏览器对 <code><header></header>、<nav></nav>、<article></article>等语义标签的解析路径更短，且现代引擎会对它们做轻量级预判优化。而一堆同级<div> 会让解析器反复回溯确认层级关系。<ul> <li>把 <code><div class="main-header">...</div>直接换成<header></header>，类名保留（用于样式），标签改掉 <div class="nav-list"> → <code><nav></nav>，<div class="card-body"> → <code><article></article>或<section></section>，视内容语义而定- 避免混用：不要写
<section><div> <h2>，<code><h2></h2>应该直接子级于<section></section>移除模板残留和空注释块，别让它们白占解析时间
注释本身不渲染，但浏览器仍需逐字读取、跳过。千行注释 ≈ 多花 3–8ms 解析时间；更麻烦的是模板语法残留（如
{{header}}），它们虽不报错，却干扰 DOM 构建顺序，尤其在 SSR 或静态生成场景下容易引发隐性阻塞。- 全局搜索
{{、{%、、<code>@@include，连同对应结束符（如}}、%}）全部删净 - 删掉形如
<!-- START: hero-section -->/<!-- END: hero-section -->的区块注释——除非你真用构建工具做条件注入，否则纯属噪音 -
<!--[if IE]>...<![endif]-->全部删除，2026 年已无兼容必要
动态加载非首屏列表，砍掉 DOM 节点数最狠的一刀
一个含 200 条目的
<ul></ul>列表，光 HTML 字符就超 15KB，DOM 节点轻松破千。浏览器解析它比加载一个 JS 文件还慢。这类内容必须延迟构建，而非塞进初始 HTML。- 把列表 HTML 拆成独立文件（如
/data/list-1.html），用fetch()+insertAdjacentHTML动态插入，首次只留占位<ul id="list-root"></ul> - 别用 jQuery
.load()—— 它默认执行内联脚本，易引发重复绑定或执行时序错乱；原生 fetch 更可控 - 滚动到可视区再加载（intersectionObserver），比 onload 后统一加载更省资源；但注意首次交互前要预加载关键项，避免“点开空白”
真正卡住百毫秒级解析的，往往不是算法或网络，而是你没删干净的那几个
<div>、没清理的模板注释、或者硬塞进 HTML 的整页列表。优化不是加东西，是持续剔除——每次删完，F5 刷新看 Performance 面板的 Parse HTML 时间是否往下掉 10ms，就说明动对地方了。</div> - 全局搜索
