【前端性能優化指南】5 - 靜態資源的優化

🔙 上一站 - 頁面解析與處理

在旅程的上一站中，咱們介紹了基本的頁面解析機制，經過對資源加載順序和腳本加載的控制，避免了無謂的阻塞，優化了解析性能。

也正如上一站中所說，這時瀏覽器除了解析頁面 DOM 外，還會對頁面包含的靜態資源發起請求，請求回來後會執行或使用資源。這一站我們就來具體看看這個階段。

首先仍是從宏觀上來了解一下：

1. 整體原則

這一部分會涉及到各種常見的靜態資源：JavaScript 腳本、CSS 樣式表、圖片、字體等。不一樣資源的優化措施既有聯繫又有差異，後續會以各種資源爲維度，針對性介紹其優化的關注點和手段。

但我們仍是要先從總體維度上進行一些分析。其實在整體原則上，各種資源的優化思路都是大致相似的，包括但不限於：

• 減小沒必要要的請求
• 減小包體大小
• 下降應用資源時的消耗
• 利用緩存

爲了你們能更好理解各種優化實施策略從何而來，先初步擴展一下以上的思路。

1.1. 減小沒必要要的請求

核心是但願可以減小請求的數量，由於瀏覽器對同源請求有併發上限的限制（例如 Chrome 是6），因此在 HTTP/1.1 下，請求過多可能會致使請求被排隊了。一個典型場景就是一些圖庫類型的網站，頁面加載後可能須要請求十數張圖片。

同時，TCP/IP 的擁塞控制也使其傳輸有慢啓動（slow start）的特色，鏈接剛創建時包體傳輸速率較低，後續會漸漸提速。所以，發送過多的「小」請求可能也不是一個很好的作法。

減小沒必要要的請求主要分爲幾個維度：

• 對於不須要使用的內容，其實不須要請求，不然至關於作了無用功；
• 對於能夠延遲加載的內容，沒必要要如今就馬上加載，最好就在須要使用以前再加載；
• 對於能夠合併的資源，進行資源合併也是一種方法。

1.2. 減小包體大小

包體大小對性能也是有直接影響的。顯然一樣速率下，包體越小，傳輸耗時越低，總體頁面加載與渲染的性能也會更好。

減小包體大小經常使用的方式包括了：

• 使用適合當前資源的壓縮技術；
• 避免再響應包體裏「塞入」一些不須要的內容。

1.3. 下降應用資源時的消耗

以上主要的關注點都在頁面資源加載的效率，其實有些時候，瀏覽器去執行或使用資源的也是有消耗的。例如在 JavaScript 執行了一段 CPU 密集的計算，或者進行頻繁的 DOM 操做，這些都會讓 JavaScript 的執行變成影響性能的一大問題。雖然今天的像 V8 這樣的引擎已經很快了，可是一些不當的操做仍然會帶來性能的損耗。

此外，像是 CSS 選擇器匹配、圖片的解析與處理等，都是要消耗 CPU 和內存的。也許這些不太常成爲性能殺手，可是某些特性場合下，瞭解它們也許會對你有所幫助。

1.4. 利用緩存

還記得我們這趟旅程從哪出發的麼？沒錯，緩存。

在旅程的第一站，咱們介紹了瀏覽器訪問一個 url 時的多級緩存策略。千萬不要忘了，這些靜態子資源也是網絡請求，它們仍然能夠利用以前介紹的完整緩存流程。緩存在不少時候會是一個幫你解決性能問題的很是有效的手段。

因爲第一站已經對緩存進行了詳細介紹，因此緩存這部分，在這一站裏只會在針對資源類型再補充一些內容。

2. 針對各種資源的性能優化 🚀

以上的原則能夠指導咱們針對性地優化各種資源。下面我就以資源類型爲維度，詳細介紹其中涉及到的優化點與優化措施。

若是你一口氣讀到這裏，可能有些累了。不如先伸個懶腰放鬆下，整理回憶一下以前的內容。

若是準備好了，我們就繼續出發吧👇

• JavaScript 優化
• CSS 優化
• 圖片優化
• 字體優化
• 視頻優化

---

「性能優化」系列內容

1. 帶你全面掌握前端性能優化 🚀

2. 如何利用緩存減小遠程請求？

3. 如何加快請求速度？

4. 如何加速頁面解析與處理？

5. 靜態資源優化的整體思路是什麼？(本文)

   5.1. 如何針對 JavaScript 進行性能優化？

   5.2. 如何針對 CSS 進行性能優化？

   5.3. 圖片雖好，但也會帶來性能問題

   5.4. 字體也須要性能優化麼？

   5.5. 如何針對視頻進行性能優化？

6. 如何避免運行時的性能問題？

7. 如何經過預加載來提高性能？

8. 尾聲

目前內容已所有更新至 ✨ fe-performance-journey ✨ 倉庫中，陸續會將內容同步到掘金上。若是但願儘快閱讀相關內容，也能夠直接去該倉庫中瀏覽。