深层嵌套需用devtools定位并拆解：运行queryselectorall脚本揪出子节点超5的容器，结合break on attribute modification、layers面板分析，语义化替换时须遵守契约（如main唯一、landmark角色正确、heading层级完整），非首屏内容应彻底移除html而非仅隐藏，重构后以fcp≤1.2s、dom节点≤1200、layout shift score≤0.1为硬指标验证。
深层嵌套怎么快速定位和拆解
超过4层的
嵌套是首屏慢、重排重、JS查询卡的常见源头，不是靠肉眼扫代码，而是用浏览器原生工具抓真问题。
- 在 DevTools 的 Elements 面板运行
document.querySelectorAll("*").forEach(el => el.children.length > 5 && console.log(el.tagName, el.children.length))，直接揪出子节点爆炸的容器 - 对返回结果逐个右键 → “Break on” → “Attribute modification”，看是否被 JS 动态塞内容——这类容器优先改用
<template></template>或延迟挂载 - 用 Layers 面板观察渲染层，若某
div下出现大量独立小合成层，基本就是冗余 wrapper + 定位滥用的铁证 - 别硬拆：先确认语义。比如
<div><div><div><p>文本</p></div></div></div>能直接扁平为<p>文本</p>；但若中间层承载了aria-live或data-testid，就得保留并换用display: contents（注意 Safari 15.4+ 才支持）
语义标签替换时哪些坑会触发 Lighthouse 告警
把 class="main" 换成 <main></main> 不是搜索替换就完事，Lighthouse 会立刻报错，因为语义标签自带契约约束。
-
document-multiple-main-elements：页面里出现两个<main></main>，哪怕一个在<iframe></iframe>里也会被扫到；多卡片仪表盘必须用<section aria-labelledby="xxx"></section>替代 -
landmark-roles失败：把面包屑或分页塞进<nav></nav>，屏幕阅读器会误判为主导航；页脚链接组应放在<footer></footer>内<ul></ul>，而非<nav></nav>套<nav></nav> -
heading-levels报错：给<section></section>加了<h2></h2>，但父级<article></article>里没<h1></h1>或<h2></h2>，语义链断裂；不加标题的<section></section>等价于<div> <li>所有语义标签必须闭合：<code><header></header>不能是<article></article>的子元素却漏掉，否则 DOM 树会被浏览器自动修正，导致 SSR/CSR 渲染不一致 - 轮播图下方的推荐区、评论列表、侧边栏，初始 HTML 里彻底删掉，改用
<template id="comments-template"></template>存原始结构，用户滚动到底部再document.getElementById("comments-template").content.cloneNode(true)插入 - tab 切换类内容，只保激活项的 HTML，其余用
data-html存字符串：<div data-html="<p>内容</p>"></div>，切换时el.innerHTML = el.dataset.html - 慎用
innerHTML直接拼字符串——XSS 风险高；优先用document.createElement+textContent组装文本，setAttribute控制属性 - 如果用了 React/Vue，确保 SSR 时这些区域返回空字符串，而不是带
v-if="false"的占位节点 - FCP（首次内容绘制）必须 ≤ 1.2s：打开 Network → Disable cache → Hard reload，看 Timing 里的 FCP 时间；超时说明仍有阻塞资源或 DOM 构建太重
- DOM 节点数 ≤ 1200：运行
document.querySelectorAll("*").length，超量会拖慢 Vue/React diff 和 DevTools 响应；重点砍掉自动生成的 wrapper（如div[data-v-xxx]） - Layout Shift Score ≤ 0.1：打开 DevTools → Rendering → Layout Shift Regions，交互中红框闪动越少越好；深层嵌套 + 无宽高的图片/广告是主因，用
contain: layout paint隔离高风险区块
非首屏 HTML 怎么做到“真不加载”
很多人以为 display: none 或 visibility: hidden 就算懒加载，其实 DOM 已建、CSSOM 已算、内存已占，只是没画出来。
重构后性能验证绕不开的三个硬指标
别信“看着快了”，得用浏览器底层信号说话。Lighthouse 的 Performance 分数可以造假，但这三项数据骗不了人。
