如何減少 HTTP Requests 的數量?
08 Sep 2018網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得,網頁大部份的時間大都花在下載資源上,只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。
文字資源的整合
適當的合併樣式(CSS)和腳本(Script)文件,可利用 Webpack 等工具有系統地打包,再配合瀏覽器快取機制便能更降低 HTTP Requests 次數。
圖片資源的整合
最經典的例子是 Sprites,將許多 icon 小圖合併成一張大圖,再利用 CSS 圖片定位的方式依需求顯示個別小圖,這樣就能將多次的 HTTP Requests 減少為一次而已,若能配合瀏覽器快取機制便不需要發出請求了,但注意在 HTTP/2 下就不再需要 Sprites 了,也可參考其他更好的選擇(例如:Base64、各種 SVG 的應用),點此看優劣比較。
外部檔案與內聯推送
外部檔案除了以上合併的處理方式之外,還要注意引入的位置,這會牽涉到是否能及早顯示畫面;而內聯推送除了可節省 HTTP 請求的次數外,還可增進效能,讓頁面更快顯示。
外部檔案-放置檔案的位置
- 樣式雖然在 DOM Parsing 能正常運作,但由於要產生 Render Tree 才能渲染畫面,因此會延遲 DOMContentLoaded 和阻塞 DOM Rendering。
- 腳本會阻塞 DOM Parsing,延遲 DOMContentLoaded,並阻塞 DOM Rendering。
因此
- 樣式要放在
<head>
儘早執行,攸關效能的部份(尤其是第一頻的內容)會以內聯方式放置,或使用 Media Query 避免非必要的檔案下載所導致的阻塞。 - 腳本要放在
<body>
結束之前,避免阻礙畫面顯示。
可參考這裡。
內聯推送-放置程式碼的位置
以上探討的皆為將樣式和腳本放在外部檔案的狀況,但若放在檔案內,即內聯樣式或腳本,就沒有發出 HTTP 請求的問題,就可節省 HTTP 請求的次數,讓頁面更快顯示。
關於樣式方面,現在當紅的 CSS Modules / Scoped CSS 和 CSS in JS 就是將樣式以內聯或行內方式放在 HTML(或說是 js)內部,並且只會載入要用到的程式碼,效能佳。
關於腳本方面,將關鍵的腳本用 <script> ... </ script>
包裹程式碼,放在 <head>
或 <body>
中,這樣會與 HTML 一同下載和執行,即可節省 HTTP 請求次數。