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