dom结构臃肿指节点数超1500或平均嵌套深度＞6层，表现为parse html耗时＞50ms或lighthouse“avoid excessive dom size”审计失败。
怎么判断 DOM 结构是否臃肿
浏览器构建 DOM 树的时间直接受节点数量和嵌套深度影响。不是“看起来复杂”才叫臃肿，而是：document.querySelectorAll('*').length 超过 1500 个节点、或平均嵌套深度 > 6 层时，解析开销就明显上升——尤其在低端安卓机上，DOM 构建可能多耗 80–120ms。
常见信号包括：首屏 HTML 解析耗时（DevTools → Network → Waterfall 中 HTML 条目「Parse HTML」阶段）> 50ms；或 Lighthouse 的「Avoid an excessive DOM size」审计失败。
- 用
document.body.innerHTML检查是否塞了大量无意义<div class="wrapper"><div class="inner"><div class="content"> 套娃<li>检查是否用 <code><table> 布局非表格数据（如导航栏、卡片列表），<code><tr><td> 节点会显著拖慢解析<li>留意构建工具输出的 HTML 是否含开发期残留（如 <code><!-- DEBUG: ... -->或未删的<div id="dev-tools">）<h3>语义化标签替换 div 的实操边界</h3> <p>用 <code><header></header>、<nav></nav>、<main></main>替代<div class="header"> 不只是“更规范”，而是让浏览器跳过部分样式计算和 DOM 遍历——它能更快定位主体内容，对 LCP 和可访问性都有直接收益。<p>但别强行替换：语义化标签有隐含行为，比如 <code><main></main>必须全局唯一，<article></article>默认有 margin，<aside></aside>在某些屏幕阅读器中会被跳过。盲目替换反而引入兼容性问题。- 仅当结构功能明确时替换：导航区块 →
<nav></nav>，页面主内容区 →<main></main>，独立内容单元（博客、新闻）→<article></article> - 纯样式包裹层（如为了
margin: 0 auto或max-width）仍用<div>，改用 CSS <code>:where()或:has()精准控制即可 -
<section></section>不是<div> 的语义版，它要求内部有标题（<code><h2></h2>或更高），否则会被视为无效语义HTML 压缩后为什么 JS 还报错
压缩 HTML 不等于只删空格换行。很多构建工具（如
html-minifier）默认开启collapseWhitespace和removeComments，但若模板里混用了内联 JS 或动态属性，就容易出问题。典型错误：
<script>console.log("<div>")</script>被压缩成console.log("<div>")，引号被吃掉导致语法错误；或 <code><div data-id="{{id}}"> 中的双大括号被误删。<ul> <li>禁用 <code>collapseWhitespace对含内联脚本或服务端模板的 HTML - 确保所有动态占位符（如
{{...}}、$t(...)）被转义或包裹在<script type="text/template"></script>中 - 用
minifyJS: false关闭 HTML 内联 JS 的二次压缩，交由专门的 JS 工具处理
preload 字体为什么没生效
<link rel="preload">加了但字体还是闪动（FOIT/FOUT），大概率是漏了crossorigin属性。字体文件跨域加载时，浏览器会按 CORS 策略拒绝应用，即使预加载成功也无效。另一个常见原因是 preload 目标与实际使用的
@font-face中src不完全一致——路径、查询参数、哈希值稍有不同，浏览器就不认为它是同一个资源。- 必须加
crossorigin：哪怕字体同源，也建议统一加上，避免本地开发与生产环境行为不一致 - 确保
href和@font-face src: url(...)完全一致，包括末尾斜杠、查询字符串（如?v=1.2） - 不要对多个字体文件都 preload，只 preload 首屏必需的那一个（如正文用的 Regular 字重），其余用
prefetch或按需加载
真实项目里最容易被忽略的，是 HTML 生成阶段的不可控性——比如 SSR 模板拼接时插入了未转义的 JSON、或 CMS 输出了带非法字符的属性值。这些不会在本地开发暴露，却会在上线后引发解析中断或执行异常。优化不能只盯着“怎么压小”，得先守住“能不能正确解析”这条底线。
- 仅当结构功能明确时替换：导航区块 →
