一、为什么资源加载会阻塞页面渲染
你有没有遇到过这种情况：打开一个网页，明明HTML已经下载完了，但页面就是白屏，非得等好几秒才能看到内容？这就是典型的资源加载阻塞问题。当浏览器遇到<script>或<link>标签时，默认会停下渲染（也就是所谓的"渲染阻塞"），等这些资源下载并执行完才继续干活。
举个生活中的例子：就像你点外卖，明明米饭先送到了（HTML），但非得等所有菜都到齐（JS/CSS）才能开吃（渲染），饿着肚子干等的感觉可不好受。
技术栈：HTML/JavaScript
<!-- 经典阻塞案例 -->
<head>
<script src="heavy-script.js"></script> <!-- 这个脚本不加载完，页面就卡着 -->
<link rel="stylesheet" href="slow-style.css"> <!-- CSS也一样 -->
</head>
二、揪出阻塞资源的"元凶"
1. CSS的阻塞特性
浏览器必须等到CSSOM（CSS对象模型）构建完成才会渲染页面，所以放在<head>里的CSS都是"嫌疑犯"。比如：
<!-- 技术栈：CSS -->
<style>
/* 哪怕只有一行样式也会阻塞 */
body { background: #f00; }
</style>
2. JavaScript的默认阻塞
更狠的是JS——不仅会阻塞DOM构建，遇到没有async/defer的脚本时，连后面的HTML解析都暂停：
// 技术栈：JavaScript
document.write("<div>突然插入的内容</div>");
// 这种古老操作会直接重置整个DOM树！
3. 字体文件的隐藏陷阱
哪怕是用@font-face引用的字体，在加载期间浏览器可能隐藏文字（FOIT现象）。曾经有个电商网站因此损失了7%的销售额——用户等不及字体加载就关页面了。
三、实战优化方案
1. CSS优化三连击
方案一：媒体查询分流
<link href="print.css" rel="stylesheet" media="print"> <!-- 非阻塞 -->
<link href="mobile.css" rel="stylesheet" media="(max-width: 768px)">
方案二：内联关键CSS
把首屏需要的样式直接写在<style>标签里，其他异步加载：
// 技术栈：JavaScript
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'non-critical.css';
document.head.appendChild(link); // 异步加载
2. JavaScript的救赎之路
方案一：经典的defer/async
<script src="analytics.js" async></script> <!-- 下载不阻塞，执行时阻塞 -->
<script src="main.js" defer></script> <!-- 等DOM解析完才执行 -->
方案二：动态加载
// 技术栈：JavaScript
const script = document.createElement('script');
script.src = 'lazy-module.js';
script.onload = () => console.log('加载完成!');
document.body.appendChild(script); // 像发快递一样按需加载
3. 预加载黑科技
用<link rel="preload">提前告诉浏览器："这个资源待会儿要用，先偷偷下载"：
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preload" href="critical.js" as="script">
四、进阶技巧与避坑指南
1. 警惕CSS中的@import
/* 技术栈：CSS */
@import url("nested.css"); /* 相当于在CSS里又发了个同步请求！ */
2. HTTP/2的服务器推送
现代服务器可以直接把关键资源"塞"给浏览器：
# 技术栈：Nginx配置
http2_push /static/css/main.css;
http2_push /static/js/app.js;
3. 监控真实性能指标
用Performance API检测关键时间点：
// 技术栈：JavaScript
const { domContentLoaded, load } = performance.timing;
console.log(`DOM就绪耗时：${domContentLoaded - navigationStart}ms`);
五、不同场景的优化策略
1. 电商首页：秒杀活动页
- 痛点：大量促销图片和倒计时脚本
- 方案：
// 先加载倒计时逻辑 import('./countdown.js').then(module => module.start()); // 图片懒加载 <img data-src="discount.jpg" class="lazyload">
2. 后台管理系统
- 痛点：几十个功能模块JS
- 方案：
// 根据路由按需加载 router.beforeEach((to, from, next) => { import(`@/modules/${to.name}.js`).then(next); });
六、总结与最佳实践
经过这一轮优化，我们能把阻塞问题从"灾难现场"变成"丝滑体验"。记住几个数字：
- 关键CSS控制在14KB以内（TCP慢启动限制）
- 首屏JS不超过200KB（中端手机解析约1秒）
- 字体文件使用
font-display: swap避免FOIT
最后送大家一个检查清单：
- [ ] 所有
<script>加上async/defer - [ ] 关键CSS内联
- [ ] 非关键资源预加载
- [ ] 监控LCP、FCP指标
下次再遇到页面卡顿，你就知道该怎么"破案"了！
评论