在現代Web開發中，頁面加載速度直接影響用户體驗和SEO排名。其中，JavaScript和CSS的資源加載與執行常常成為頁面渲染的瓶頸。本文將深入探討這些資源如何影響頁面渲染，並提供一系列實用解決方案。

理解關鍵渲染路徑

在深入研究解決方案前，我們需要了解瀏覽器如何處理網頁資源：

  1. 解析HTML → 構建DOM樹
  2. 遇到CSS → 暫停HTML解析，下載並解析CSS，構建CSSOM
  3. 遇到同步JS → 暫停HTML解析，下載並執行JS（如果外部CSS未完成，還需等待）
  4. 合併DOM和CSSOM → 形成渲染樹
  5. 佈局 → 計算元素位置和大小
  6. 繪製 繪製 → 將像素顯示到屏幕上

正是這個過程中的"暫停"，導致了資源阻塞問題。

CSS阻塞渲染的原因與解決方案

1. 媒體查詢優化

利用媒體屬性讓非關鍵CSS不阻塞渲染：

<!-- 會阻塞渲染 -->
<link rel="stylesheet" href="style.css">

<!-- 打印樣式，不會阻塞初始渲染 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 大屏幕樣式，小屏幕設備不會阻塞 -->
<link rel="stylesheet" href="large.css" media="screen and (min-width: 1200px)">

2. 內聯關鍵CSS

提取首屏內容所需的關鍵CSS直接內聯到HTML中：

<style>
/* 關鍵CSS - 摺疊區域上方內容的樣式 */
.header { ... }
.hero { ... }
.nav { ... }
</style>

<!-- 異步加載非關鍵CSS -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

3. 異步加載CSS

使用JavaScript動態加載CSS文件：

function loadCSS(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}

// 或在onload事件中加載
window.addEventListener('load', function() {
loadCSS('non-critical.css');
});

JavaScript阻塞渲染的解決方案

1. 合理使用async和defer

理解三種腳本加載方式的區別：

<!-- 常規腳本 - 解析到解析到此時立即停止並執行 -->
<script src="script.js"></script>

<!-- defer - HTML解析完成後按順序執行 -->
<script src="script1.js" defer></script>
<script src="script2.js" defer></script> <!-- script2會在script1後執行 -->

<!-- async - 下載完成後立即執行，無序 -->
<script src="script1.js" async></script>
<script src="script2.js" async></ async></script> <!-- 先下載完的先執行 -->

選擇策略：

  • defer：適用於有依賴關係的腳本
  • async：適用於獨立模塊，如分析代碼、廣告腳本

2. 延遲非關鍵JavaScript

將不影響首屏渲染的腳本推遲加載：

// 方法一：使用setTimeout延遲執行
setTimeout(function() {
const script = document.createElement('script');
script.src = 'non-critical.js';
document.body.appendChild(script);
}, 3000); // 延遲3秒加載

// 方法二：在用户交互時加載
document.addEventListener('click', function loadNonCriticalJS() {
// 加載代碼...
document.removeEventListener('click', loadNonCriticalJS);
});

// 方法三：使用requestIdleCallback（現代瀏覽器）
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
loadScript('non-critical.js');
});
}

3. 代碼分割與懶加載

對於單頁應用(SPA)，使用動態導入實現代碼分割：

// Webpack動態導入
button.addEventListener('click', () => {
import('./module')
.then(module => {
module.doSomething();
})
.catch(err => {
console.error('模塊加載失敗:', err);
});
});

// Vue中的異步組件
const AsyncComponent = () => ({
component: import('./MyComponent.vue'),
loading: LoadingComponent,
error: ErrorComponent,
delay: 200,
timeout: 3000
});

高級優化策略

1. 預加載關鍵技術

使用Resource Hints指導瀏覽器優先級：

<!-- 預加載關鍵資源 -->
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">

<!-- DNS預連接 -->
<link rel="dns-prefetchrefetch" href="https://cdn.example.com">

<!-- 預連接 -->
<link rel="preconnect" href="https://api.example.com">

2. 服務端渲染(SSR)與流式渲染

服務端發送部分HTML後即可開始渲染：

// Express示例
app.get('/', (req, res) => {
// 先發送頭部HTML
res.write(`
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
<style>/* 關鍵CSS */</style>
</head>
<body>
<header>...</header>
<main>
`);

// 異步獲取數據
fetchData().then(data => {
// 發送主要內容
res.write(renderContent(data));

// 發送底部和延遲腳本
res.end(`
</</main>
<footer>...</footer>
<script src="deferred-script.js" defer></script>
</body>
</html>
`);
});
});

3. 監控與性能測量

持續監測網站性能：

// 使用Performance API
const perfData = window.performance.timing;
const domContentLoaded = perfData.domContentLoadedEventEnd - perfData.navigationStart;
const fullyLoaded = perfData.loadEventEnd - perfData.navigationStart;

console.log(`DOMContentLoaded: ${domContentLoaded}ms`);
console.log(`完全加載: ${fullyLoaded}ms`);

// 監聽長任務
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('長任務:', entry);
}
});
observer.observe({entryTypes: ['longtask']});
}

實戰案例

假設我們有一個電商產品頁需要優化：

優化前的狀態：

  • 4個CSS文件，總計300KB
  • 8個JavaScript文件，總計800KB
  • DOMContentLoaded時間：3.2秒

優化步驟：

  1. 內聯摺疊上方關鍵CSS（壓縮後15KB）
  2. 異步加載剩餘CSS
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  1. 重構JavaScript
<!-- 關鍵功能 -->
<script src="cart-interaction.js" defer></script>

<!-- 非關鍵功能延遲加載 -->
<script>
window.addEventListener('load', function() {
// 推薦商品輪播
loadScript('recommendation-carousel.js');

// 用户評論模塊
if (document.documentElement.scrollHeight > 2000) {
loadScript('comments-system.js');
}
});
</script>
  1. 添加資源提示
<link rel="preconnect" href="https://static.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">

優化結果：

  • DOMContentLoaded時間減少至1.1秒
  • 首次內容繪製(FCP)提前65%
  • 跳出率降低18%

總結

消除JavaScript和CSS的渲染阻塞是提升網站性能的核心環節。通過本文介紹的技術組合——從基礎的async/defer使用，到進階的代碼分割與服務端渲染——你可以顯著改善用户體驗。

記住，優化是一個持續的過程。隨着項目發展，定期審核資源加載策略，藉助Chrome DevTools等工具分析性能瓶頸，才能確保你的網站在快速變化的Web環境中始終保持優異表現。

進一步學習資源：

  • Google Web Fundamentals - Performance
  • MDN Resource Hints
  • Web.dev Fast Load Times

希望這篇文章能幫助你在優化路上更進一步！