未来可期。 今天就把当前这个压箱底的干货掏出来跟较大家唠唠——preload和这对卧龙凤雏， 用良好了能让你的页面加载迅速人一步，用错了……嘿嘿，那画面太美我不敢看。

一、 先说说浏览器到底是咋玩儿资源条件的

我惊呆了。 先别急，先给你甭管啥子背景都讲一遍。浏览器打开HTML后 先把搭起来然后遇到啥的，就会停下来等CSS下载完再往下走。等CSS下载完，才会去渲染页面这叫渲染阻塞。

搞一下... 要是这玩意儿太较大， 用户眼睛看到白白的空白页，就直接跑掉。于是我们就想办法抢在HTML解析前把关键CSS给弄良好。

二、 preload 和 prefetch 的差别

那必须的！ preload：告诉浏览器：“兄弟，我马上要用当前这个资源条件，你赶紧帮我抢个先手！” prefetch：告诉浏览器：“以后有可能会用，你有空帮我先下下来吧”。

图啥呢？ 注意：别把两者混着用了 要不然申请会炸裂，网络卡得像老牛拖车。

2.1 preload 用法示例

上面那行代码其实是让浏览器提前拉取critical.css和字体文件， 不管它们后面哪些时候真实的被采用，都已经在缓存里啦。

2.2 prefetch 用法

那必须的！ 这一些东西一般放在页面底部或者异步脚本里不会作用于首屏渲染。

三、 实战：怎么给 CSS 加 preload 让页面瞬间闪现

1. 找关键 CSS：先打开 Chrome DevTools → Network → 筛选 CSS，看哪些文件体积较大且阻塞时间段较长。
2. 写 preload 标记：
3. 配合 media 条件：
4. 别忘了 as 属性：a s = "style"， 不然浏览器有可能当成普通链接处理，优先级不升。
5. SRI + crossorigin：If you load from CDN, add integrity check.

⚠️ 较小心点：如果你把全部 CSS 都 preload， 网络申请数瞬间飙到十几条，那就跟打仗似的——资源条件争抢、带较宽炸裂、CPU 抖动。最终还是结果是白忙活。

四、 坑点合集

• PWA 周边环境下：PWA Service Worker 会拦截 preload 申请，如果没有正确 cache 那么又回到缓慢缓慢等。
• MIME 类型错误："as=style" 却返回 text/html，浏览器直接报错不下载。
• CORS 问题：CORS 没开跨域的话， 字体预加载根本不生效，还会报 “blocked by CORS policy”。
• Synchronous vs Asynchronous：alert 放在 head 里会阻塞 preload，一定要避免。
• #TODO:: 写完后遗忘删除占位符代码，引起页面报错 404。

4.1 “媒体平台查询 + preload” 的奇葩玩法

我跪了。 不过有时候媒体平台查询写错了比如拼成 "" 那就全都失效啦！)

五、 一下——就是这么

良好啦，一下我这篇乱七八糟的干货：

1. Pretend you are a ninja. 用  抢资源条件；别遗忘 as="style".
2. Dodge traps. 不要一次性 preload 全部 CSS，挑关键的那几块儿就行；否则带较宽爆炸。
3. Tune with media. 配合 @media/media=... 只在需要时才下载；省流量还能提升 SEO，这是因为首屏更迅速。
4. Avoid duplicate. 预加载后再正常引入同一个文件时 浏览器会复用已经下载良好的内容，不会二次申请，但如果路径或参数不同，就相当于崭新资源条件，又浪费带较宽。
5. Laugh at mistakes. 开发过程总会踩坑， 更多看看 console 报错，更多测网速缓慢的时候效果，再改改代码。

🚀🚀🚀

`