嵌套过深会拖慢首屏渲染，因浏览器流式解析时每层均增加DOM创建、样式计算和布局更新开销，nodeDepth超6层时FCP明显延迟；应优先用语义化标签替代冗余div，script须加defer/async或置于前。
HTML标签用得不对，首屏就卡；不是代码写得慢，是浏览器被你拖住了。
为什么嵌套过深会让首屏变慢
浏览器解析 HTML 是流式过程，每多一层 <div>，就多一次 DOM 节点创建、样式计算和布局树更新。实测中，<code>nodeDepth 超过 6 层时，低端设备上 FCP（首次内容绘制）延迟明显，DevTools 的 Layout 阶段耗时会突增。
- 用
<section></section>、<article></article>、<nav></nav>替代无意义的<div class="wrapper"><div class="inner"><div class="content"> 堆叠 <li>避免在 <code><table> 单元格里嵌套 <code><div> 再套 <code><p></p>—— 表格内部样式计算成本高，易触发重排 - 查深度：Elements 面板右键节点 → “Show DOM properties” → 看
nodeDepth值 - 依赖 DOM 的脚本（如初始化 Vue/React、绑定按钮事件）：加
defer，按顺序执行，时机在 DOM 解析完、DOMContentLoaded前 - 纯统计类、无 DOM 依赖的脚本（如
analytics.js）：用async，下载完立刻执行，不保序也不等 DOM - 严禁写
<script src="app.js"></script>（无属性）—— 同步阻塞模式，用户看到的就是白屏 -
type="module"默认等效于defer，还支持静态导入分析，但旧版 Safari 兼容性需确认 - 首屏图片加了
loading="lazy"：浏览器跳过加载，关键图延迟出现，LCP 暴涨 -
<img alt="HTML标签合理使用与首屏性能优化教程" >缺width/height：尺寸未知，加载时触发布局重排，造成 CLS（累积布局偏移） - SSR 页面里 JS 动态插入的
<img alt="HTML标签合理使用与首屏性能优化教程" >：默认loading="eager"，和预期不符，得手动补 - 稳妥做法：首屏图片不加
loading（即默认 eager），非首屏统一加loading="lazy"，所有<img alt="HTML标签合理使用与首屏性能优化教程" >都带宽高（可用 CSSaspect-ratiofallback） - 工具提取：用
criticalnpm 包或html-critical-webpack-plugin，输入 HTML + CSS，输出内联片段 - 内联内容必须放在
中的<style></style>标签里，不能放或注释后 - 非关键 CSS 推荐用
<link rel="stylesheet" media="print" onload="this.media='all'">延迟加载 - 绝对禁用
@import引入关键样式——它强制串行请求，比<link>多一次网络往返，实测拖慢 FCP 300ms+
script 标签放哪儿才不卡住页面渲染
<script></script> 默认同步执行，放在 顶部且没加属性，HTML 解析立刻暂停——这是白屏最常见的根源。
图片加载导致 CLS 或 LCP 暴涨的常见翻车点
loading="lazy" 不是开关一开就提速，用错反而拖累核心指标。
立即学习“前端免费学习笔记（深入）”；
内联 CSS 和 critical CSS 的实际边界在哪
内联全部 CSS 是反模式。真正该内联的，仅限首屏渲染立即需要的样式（比如 header、导航栏、首屏按钮、文字排版）。
最容易被忽略的是：首屏图片是否真的“在首屏”，以及 nodeDepth 是否悄悄突破了 6 层——这两点不查，光压缩 JS、开 Gzip，性能瓶颈根本没碰着。
