crp卡在parser同步加载的css上，如main.css耗时200ms+且含@import、非首屏样式未拆分、link误放body、preload/as错配或缺失crossorigin、modulepreload无法处理动态import及cors不一致，微服务前端需js调度依赖。
关键渲染路径（CRP）卡在哪，先看Network面板的Initiator列
白屏时间长但DOMContentLoaded早就触发，说明阻塞不在DOM构建，而在render tree生成前。打开Chrome DevTools → Network 面板，按Initiator列排序，重点关注标为parser的请求——这些是HTML解析时同步拉取的资源，大概率就是CRP瓶颈。
典型现象：main.css显示Initiator = parser，且耗时200ms+；它后面所有JS、图片、字体都排在它之后，即使DOM已就绪也动不了。这时候别急着压JS，先处理这个CSS。
- 检查该CSS是否含
@import：有则必须拆掉，@import会阻塞自身解析，形成隐式二级阻塞链 - 确认是否真的首屏必需：非首屏样式（如tab页、弹窗）应抽离，用
media="(min-width: 768px)"或media="print"条件加载 - 避免
<link rel="stylesheet">放在里：浏览器会暂停解析，直到该CSS下载并开始解析
preload不是万能钥匙，错配as属性等于没写
preload必须出现在内、<title></title>之前，且href和as必须同时存在、严格匹配。漏掉as，浏览器就当普通<link>处理，根本不会提前发起请求。
常见错配：
- 字体写
as="font"却没加crossorigin：同源也得加，否则字体加载失败，控制台静默无报错 - CSS写
as="style"，但href指向的是带查询参数的URL（如main.css?v=1.2.3），而实际<link rel="stylesheet">引用的是main.css——两个URL不一致，预加载资源无法被CSSOM复用 - JS写
as="script"，但后续<script src="..."></script>没加defer：preload只管下载，执行仍由script标签控制，不配defer可能在依赖未就绪时就执行
modulepreload能自动展开静态import链，但动态路径完全失效
modulepreload确实会fetch并解析目标模块，然后递归扫描其顶层import语句（如import { foo } from './utils.mjs'），对字面量路径发起并行请求。但它对运行时拼接路径毫无感知。
以下写法不会触发任何子模块预取：
-
import('./chunk-' + id + '.mjs')：动态import，modulepreload不分析 -
import(`./${env}/config.mjs`)：模板字符串，路径不可静态推导 -
import('./lib/index.js')但服务器返回404或MIME类型不是application/javascript：解析中断，链式预取终止
更隐蔽的坑是CORS不一致：<script type="module" src="/a.mjs" crossorigin="anonymous"></script>和<link rel="modulepreload" href="/a.mjs">必须用完全相同的crossorigin值，否则浏览器视为两个不同资源，重复下载。
微服务前端别指望HTML标签管依赖，JS才是调度中枢
HTML里没有能表达“先加载用户服务SDK，再加载订单组件，最后初始化支付模块”的声明式标签。preload、modulepreload、defer全是静态、无状态、无去重机制的指令，无法响应服务发现API返回的模块列表，也无法处理版本冲突或加载失败重试。
真实做法是把HTML当入口钩子，依赖逻辑全交JS控制：
- 用
sessionStorage维护加载队列，每次成功执行一个模块后shift()下一个，防止刷新后重复加载 - 用
Promise.allSettled()并发加载多个独立模块，再统一处理结果，而非靠HTML顺序硬扛 - 把模块路径从HTML移到JS中管理，配合
import()动态加载，才能接入服务发现配置和灰度开关
最容易被忽略的是：即使你写了modulepreload，只要最终执行靠import()驱动，那它的预取收益就取决于import()调用时机——太早调用，预取还没完成；太晚，又失去意义。这个窗口需要实测校准，不能只看HTML写了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
