一、瀏覽器渲染基礎：關鍵渲染路徑解析
當瀏覽器加載網(wǎng)頁時，遵循以下關鍵步驟：
- HTML解析 → 2. DOM樹構(gòu)建 → 3. CSSOM構(gòu)建 → 4. 渲染樹構(gòu)建 → 5. 布局 → 6. 繪制
JavaScript在其中的作用：
graph LR
A[HTML解析] --> B[遇到JS]
B -->|同步JS| C[阻塞DOM構(gòu)建]
C --> D[執(zhí)行JS]
D --> E[繼續(xù)DOM構(gòu)建]
B -->|CSS| F[阻塞渲染]
關鍵點：在DOM樹構(gòu)建過程中遇到JavaScript時：
- 如果是外部JS文件：瀏覽器必須等待JS下載并執(zhí)行完成
- 如果是內(nèi)聯(lián)JS：瀏覽器立即執(zhí)行代碼
二、JavaScript加載的阻塞行為驗證
2.1 實驗：同步JS的阻塞效應
<!DOCTYPE html>
<html>
<head>
<title>阻塞測試</title>
<script>
const start = Date.now();
while (Date.now() - start < 3000) {}
</script>
</head>
<body>
<h1>3秒后你會看到我</h1>
</body>
</html>
實驗結(jié)果：頁面空白3秒后才顯示內(nèi)容，證明同步
2.2 外部JS文件的阻塞情況
<script src="heavy-script.js"></script>
問題核心：
- 網(wǎng)絡時間：下載JS文件所需的時間
- 執(zhí)行時間：JS解析和執(zhí)行時間
三、解決方案：打破JS阻塞的四種策略
3.1 async屬性：異步加載（適用于獨立腳本）
<script src="analytics.js" async></script>
特性：
- 異步下載，不阻塞HTML解析
- 下載完成后立即執(zhí)行，可能中斷渲染
- 執(zhí)行順序無法保證
3.2 defer屬性：延遲執(zhí)行（推薦方案）
<script src="main.js" defer></script>
特性：
- 異步下載，不阻塞HTML解析
- 執(zhí)行推遲到DOMContentLoaded事件之前
- 保持多個腳本的執(zhí)行順序
3.3 動態(tài)加載：靈活控制
function loadScript(src, callback) {
const script = document.createElement('script');
script.src = src;
script.onload = callback;
document.head.appendChild(script);
}
優(yōu)勢：完全控制加載時機，可實現(xiàn)按需加載
3.4 模塊化加載（ES Modules）
<script type="module">
import { init } from './app.js';
init();
</script>
特性：
- 默認具有defer行為
- 支持模塊依賴解析
- 現(xiàn)代瀏覽器原生支持
四、性能優(yōu)化實戰(zhàn)：對比實驗數(shù)據(jù)
| 加載方式 | 渲染開始時間 | DOMContentLoaded | 完全加載時間 | FCP(ms) | TTI(ms) |
|---|
| 同步加載 | 3.2s | 3.5s | 4.1s | 3200 | 4100 |
| async | 0.8s | 2.2s | 3.0s | 800 | 3000 |
| defer | 0.8s | 1.9s | 2.8s | 800 | 2800 |
| 動態(tài)加載 | 0.8s | 1.4s | 2.5s | 800 | 2500 |
測試環(huán)境：1MB JS文件 + 中等復雜度頁面，模擬3G網(wǎng)絡
五、避免阻塞的關鍵實踐
5.1 最佳資源加載順序
<head>
<link rel="stylesheet" href="critical.css">
<script src="analytics.js" async></script>
<script src="main.js" defer></script>
</head>
5.2 優(yōu)化JS執(zhí)行時間
function processInChunks() {
const chunkSize = 100;
let index = 0;
function processChunk() {
const end = Math.min(index + chunkSize, data.length);
for (; index < end; index++) {
}
if (index < data.length) {
requestIdleCallback(processChunk);
}
}
processChunk();
}
5.3 現(xiàn)代瀏覽器預加載掃描器優(yōu)化
<link rel="preload" href="critical.js" as="script">
<link rel="preconnect" href="https://cdn.example.com">
六、特殊情況與邊界處理
6.1 document.write的陷阱
document.write('<script src="dangerous.js"></script>');
風險：在DOMContentLoaded之后使用會清空頁面
6.2 CSS對JS執(zhí)行的潛在阻塞
graph TD
JS[JavaScript執(zhí)行] -->|需要CSSOM| CSS[CSS加載]
CSS -->|未完成| Block[阻塞JS執(zhí)行]
Block -->|CSSOM就緒| Continue[繼續(xù)執(zhí)行JS]
七、性能監(jiān)測工具實戰(zhàn)
Chrome DevTools監(jiān)測：
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
console.log('長任務：', entry);
}
});
observer.observe({ entryTypes: ['longtask'] });
關鍵指標：
- FCP (First Contentful Paint)：首次內(nèi)容渲染
- TTI (Time to Interactive)：可交互時間
- Long Tasks：超過50ms的任務
小結(jié)
基本原則：
- 關鍵路徑JS：使用
<script defer> - 非關鍵JS：使用
<script async>或動態(tài)加載
性能優(yōu)化進階：
import('./module')
.then(module => module.init())
.catch(err => console.error('加載失敗', err));
現(xiàn)代框架最佳實踐：
- React：
React.lazy + Suspense - Vue：異步組件
- Angular：路由懶加載
最終性能公式：
頁面響應速度 = (關鍵資源大小/網(wǎng)絡速度) + 最長任務時間
每次網(wǎng)絡請求都是潛在的阻塞點，每毫秒執(zhí)行時間都會影響用戶體驗。
轉(zhuǎn)自https://juejin.cn/post/7523037165254934571
該文章在 2025/7/7 11:14:21 編輯過
400 186 1886
