CRP优化核心是加速首屏渲染，通过优先加载关键资源、延后非关键资源，确保HTML边下载边解析；JS置底或加defer/async，首屏CSS内联或异步加载，精简DOM结构，并用DevTools验证FCP等指标。
关键渲染路径（CRP）优化的核心，是让浏览器更快完成“接收 HTML → 解析构建 DOM → 获取样式生成 CSSOM → 合成渲染树 → 布局与绘制”的全过程，从而把首屏内容更快地画到屏幕上。它不靠压缩更多代码，而是理清哪些资源必须优先、哪些可以延后，让解析流不中断、不等待。
让 HTML 解析不卡住
浏览器边下载边解析 HTML，一遇到阻塞型资源就停。控制好 JS 和 CSS 的加载时机，就能保持解析流畅：
- JS 脚本尽量放在
</body>前，等 DOM 构建完再执行 - 必须在
<head>中引入的 JS，加defer属性：下载不阻塞，执行等 DOM 就绪 - 统计、埋点等非关键 JS 用
async：独立下载执行，不保证顺序，也不影响主流程 - 删除内联脚本中
document.write()或同步 XHR：它们会强制中断并重置整个解析器
让首屏 CSS 不拖后腿
CSS 是默认渲染阻塞资源，哪怕一个字节没加载完，页面也不会显示任何内容：
- 提取首屏必需的 CSS（如导航栏、Banner、标题样式），内联进
<style>标签，体积控制在 1KB 以内 - 非首屏 CSS 改用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载，避免阻塞初始渲染 - 禁用
@import：它导致 CSS 串行加载，换成多个<link>可并行请求 - 对打印、大屏等非首屏样式，用
media="print"或media="(min-width: 1024px)"标记，浏览器直接跳过解析
精简首屏 DOM 结构
DOM 节点越多、嵌套越深，构建和遍历耗时越长：
- 删除首屏不可见内容：比如隐藏弹窗、底部 footer、未展开的商品列表，留到滚动或交互时再加载
- 控制 DOM 嵌套层级 ≤6 层，减少冗余
div，多用语义化标签（如<header>、<section>） - 若首屏结构简单（如活动页、登录页），可直接内联首屏 HTML 到入口文件，省去一次 HTML 请求
验证是否真正生效
别只看打包体积，要用 Chrome DevTools 的 Performance 面板 录制加载过程，重点关注：
- First Contentful Paint（FCP）≤1.8s（理想值 ≤1.5s）
- 检查是否有长任务阻塞主线程，或强制同步布局（Layout Forced）警告
- 在 Network 面板确认关键资源（HTML、关键 CSS、首屏 JS）是否并行加载、无瀑布链
不复杂但容易忽略
