前端性能優化方案索引

前端性能優化方案索引

陸續整理和不斷更新網絡上給出的前端性能的優化方案。

這裏只是作一個總歸納式的索引，每個方案都十分值得推敲和細說。

1 請求和響應

緩存控制

請求頭裏，能夠發送 If-Modified-Since 以及 If-None-Match 等信息，來詢問服務端請求內容是否有更新，若是沒有更新，可返回304，告訴瀏覽器使用緩存，避免從新下載資源。Pragma 和 Cache-Control 等也能控制緩存。如告訴服務端不要緩存等。

響應頭裏，Expires 能夠告訴瀏覽器過時時間，Last-Modified 最近更新時間，ETag 則可容許瀏覽器進行緩存驗證（在 If-None-Match 請求信息中使用）。

複用TCP

請求頭裏，Connection 可控制 TCP 通道的使用，使用 keep-alive 能夠複用上次打開的 TCP。

GZIP壓縮

若是能夠啓用 gzip 壓縮，將減小響應數據大小，加快響應。請求頭裏面可用 Accept-Encoding 告知瀏覽器支持的壓縮方式，而服務端則用 Content-Encoding 做爲迴應。

Cookies

發送請求時，cookies 也在請求之中。所以，cookies 也能夠做爲減小請求的優化對象。如，根據同源限制策略，可使用多個域名加載資源，如加載靜態資源，就不會發送多餘的 cookies；同時，合理設置 cookies 的路徑和域名，如在子站避免沒必要要的來自父站的 cookies。

減小HTTP請求

有不少細節能夠實現，好比CSS Sprites、Data URL等等，因爲此部份內容和下述內容有所重複，故部分細節在下面會講到。

多域名分發

同域下瀏覽器能併發的請求有限，而爲了增長併發，尤爲是一些靜態資源上，可使用多個域名。但因爲域名DNS解析自己也是耗時的，因此實踐原則是2-4個爲宜。

須要額外提醒的是，加載圖像資源的時候，併發沒有問題；但在加載 JavaScript 腳本的時候，仍是會暫停加載其餘資源。

使用CDN

根據用戶能訪問的最快位置加速訪問。

避免重定向和404

重定向和404將浪費加載請求。

favicon.ico

瀏覽器默認加載的資源，最好可以緩存之。

2 HTML

減小DOM

過多的DOM元素會影響渲染、加載、執行。除了精簡頁面結構外，還能夠適時刪除沒必要要的DOM元素（頁面內已經不會再訪問的元素），又或者能夠懶加載（不必定會使用到的元素，如登陸框）。

CSS 和 JavaScript 文件位置

CSS 放 head，JavaScript 放 body 閉標籤前。乃是由於：

• 樣式表不參與 DOM 修改，因此不會爲了解析樣式中止文檔解析

• 瀏覽器要避免重繪，在沒有拿到所有樣式前不會開始渲染

• 解析樣式時，有的瀏覽器（FF）會中止腳本運行，而有的（Webkit）則會在腳本訪問樣式屬性但可能受未加載樣式影響時中止腳本運行

• 腳本解析中可能請求樣式，若是樣式還未解析完畢就會出錯

• 腳本執行將暫停文檔的解析和資源的下載

所以，將兩者放在適當的位置，可以極大提升渲染效率。

腳本延遲加載

可將腳本添加 defer 和 async 屬性。兩個屬性的共通點在於，腳本的加載和文檔的解析是同步進行的，而區別在於：async 一旦加載完畢，當即中止文檔解析並執行腳本；defer 等待文檔解析完畢後再執行。

合理使用內聯

腳本和樣式，應按需選擇內聯或者外鏈。對於訪問少、樣式和腳本複用少的頁面，能夠考慮使用內聯樣式從而減小 HTTP 請求。但若是頁面訪問頻繁，樣式腳本在多個頁面常常複用，使用外鏈則是最優選擇。

不管如何，須要避免使用 @import 來導入樣式。

而圖像也是同樣，高級瀏覽器支持將圖像數據直接 base64 編碼在 src 屬性裏，必要時可直接在 HTML 裏輸出圖片數據。

減小iframe

iframe 自己有許多優勢，好比能夠並行下載腳本，適合加載慢內容（如廣告），同時瀏覽器能夠對其進行安全控制。

減小使用 iframe 的主要考慮是：iframe 會阻礙頁面加載，同時也沒有語義。

3 CSS

選擇器

選擇器效率排行以下：

1. ID選擇器

2. 類選擇器

3. 標籤選擇器

4. 相鄰選擇器

5. 子選擇器

6. 後代選擇器

7. 通配符選擇器

8. 屬性選擇器

9. 僞類選擇器

效率與優先級並非對等關係，優先級高的不必定效率高。如 #id.class 合用比 單個 #id 的優先級高，但效率卻比值慢。

選擇器書寫建議是：

1. 避免使用通配符

2. 不使用標籤名或類名修飾ID規則：若是規則使用ID選擇器做爲關鍵選擇器，不要給規則添加標籤名。由於ID自己就是惟一的，添加標籤名會沒必要要地下降匹配效率

3. 不使用標籤名修飾類：相較於標籤，類更具獨特性

4. 儘可能選擇最具體的方式：形成低效的最簡單粗暴的緣由就是在標籤上使用太多規則。給元素添加類能夠更快細分到類方式，能夠減小規則去匹配標籤的時間

5. 關於後代選擇器和子選擇器：避免使用後代選擇器，非要用的話建議用子選擇器代替，但子選擇器也要慎用，標籤規則永遠不要包含子選擇器

6. 利用可繼承性：不必在通常內容上聲明樣式

避免濾鏡、表達式、Hack

效率低。

Sprites

合併圖片可減小 HTTP 請求。其餘建議有：

1. Sprite 中水平排列圖片，垂直排列會增長文件大小

2. Sprite 中把顏色較近的組合在一塊兒能夠下降顏色數，理想情況是低於256色以便適用PNG8格式

3. 不要在Spirite的圖像中間留有較大空隙。這雖然不大會增長文件大小,但對於用戶代理來講它須要更少的內存來把圖片解壓爲像素地圖。100×100的圖片爲1萬像素，1000×1000就是100萬像素

使用3D動畫

使用 transform: translate3d 等可加速 GPU 渲染。

4 JavaScript

避免重排

渲染中可能存在的高成本操做：

1. 修改、增長、刪除DOM節點

2. 移動DOM位置或者動畫效果

3. CSS樣式修改（重繪比重排好些）

4. 調整窗口大小，或者滾動時有絕對定位、fixed 背景以及動畫

5. 修改頁面默認字體

瀏覽器通常會緩存Render Tree的更新渲染，但如下狀況除外：

1. 調整窗口大小和修改頁面默認字體

2. client/offset/scroll

3. getComputedStyle() currentStyle

優化建議：

1. 修改 className 而非 style

2. 離線 DOM 後修改，如 documentFragment 或者 display:none 後再調整樣式

3. 緩存屬性值

4. 動畫使用 absolute/fixed

5. 不使用 table 佈局（牽一髮動全身）

6. 修改層級比較低的 DOM

事件委託

將多個節點上的事件放到其父節點（經典案例：將 li 上的事件綁定到 ul 上）。

內存管理

合理釋放和緩存內存。如緩存複用的屬性，接觸對象引用等。

5 資源

壓縮大小

壓縮樣式、腳本、圖像等資源的大小。

針對圖像資源，可從預覽小圖、格式選擇等多角度優化。

懶加載

如圖像的懶加載（滾動到顯示區域後才加載）等。

預加載

針對以後會用到的資源提早加載。

5 客戶端

localStorage 緩存

相比 cookies，localStorage 存儲容量更大。能夠將一些靜態資源（如 jQuery庫）等緩存。