網頁首屏性能優化總結

寫在前面

本文首發於公衆號：符合預期的CoyPan

做爲一名前端工程師，網頁首屏性能優化是一個繞不開的話題。最近這段時間我作了一些首屏性能優化的項目，這裏作一個小小的總結。

項目實施過程

網頁是運行在瀏覽器端的，優化網頁性能沒法脫離瀏覽器。因此首先須要搞清楚瀏覽器加載一個網頁的過程。最經典、常見的一個問題就是：從輸入Url到網頁呈如今用戶面前，到底發生了什麼。這裏面最重要的兩個點：網絡請求過程以及瀏覽器的工做原理（主要是渲染原理）。搞清楚這兩個點，咱們纔有了優化的理論基礎。

接下來是項目實施的過程：

明確首屏指標 -> 優化前首屏指標測量與分析 -> 優化 -> 優化後首屏指標測量與分析 -> 優化收益總結

每個過程都有必須完成的工做，並非想到哪裏就優化哪裏，而是須要完整、嚴謹的數據支持。

優化方法總結

前端首屏性能優化的知識點不少，很雜。我分紅了兩個大的方向：資源加載優化 和 頁面渲染優化。

資源加載優化

資源加載的優化，我分紅了5個部分：減少資源大小，減小Http請求次數，提升Http響應速度，優化資源加載時機，優化加載方式。

每個部分，都有不少的工做能夠作。有的是須要從項目工程化上面解決，有的須要從網絡基礎設施上解決，有的是從代碼層面解決。最終總結起來，資源加載優化主要是從大小、數量、速度、時機這幾個基本方面進行優化，每一項優化最終都是對這四個基本面中一個或多個方面的優化。

頁面渲染優化

頁面渲染優化前，首先須要搞清楚瀏覽器的渲染原理，而後主要是在代碼層面進行優化。我分了3個部分：優化html代碼，優化js和css代碼，優化動畫效果。

瀏覽器渲染，仍是那個經典的像素管道：

優化html主要是對頁面總體結構的優化，最終的目標儘量快的生成DOM樹，CSSOM，觸發渲染，不要發生阻塞的狀況。就是將像素管道中的Style 和 Layout 儘量提早。

優化js代碼是爲了減輕主線程的壓力，防止主線程因長時間執行js代碼，阻塞了頁面渲染。即減小像素管道中的JavaScrtip的耗時。優化css代碼是爲了減小像素管道中Style的耗時。同時，還應該注意儘可能減小重排和重繪，防止像素管道被中斷而後從頭再次觸發。

優化動畫效果是爲了儘量跳過上述像素管道中的Layout 和 Paint 。

寫在後面

本文總結了系統地進行前端性能優化的總體思路。具體到實施的過程，每一種優化方法都能搜到詳細的文章，這裏就不展開了。同時，還應該結合具體的業務場景對症下藥，最終真正的提升用戶體驗。符合預期。

---