前端性能優化指南

前端須要性能優化麼？

性能優化一直以來都是前端工程領域中的一個重要部分。不少資料代表，網站應用的性能優化對於提升用戶留存、轉化率等都有積極影響。能夠理解爲，提高你的網站性能，就是提高你的業務數據（甚至是業務收入）。

性能優化廣義上包含前端優化和後端優化。後端優化的關注點更多的時候是在增長資源利用率、下降資源成本以及提升穩定性上。相較於後端，前端的性能優化會更直接與用戶的體驗掛鉤。從用戶體驗側來講，前端服務 5s 的加載時間優化縮減 80%(1s) 與後端服務 50ms 的響應優化縮減 80%(10ms) 相比，用戶的體驗提高會更大。所以不少時候，與體驗相關的性能的瓶頸會出如今前端。

我和一些同窗接觸的過程當中，發現做爲前端工程師，你們其實都具有必定的性能優化意識，同時也有本身的優化「武器庫」，例如懶加載、資源合併、避免 reflow 等等。雖然你們對性能優化都有本身的思路，不過大可能是分散在某幾個點，較難造成一個完整的體系。業界也有不少優質的資料，例如雅虎的性能優化 35 條，可是性能優化做爲一個系統性工程，你們想要系統性地去學習並不容易。

1、html文檔結構標籤語義化

一、首先什麼是語義化呢？

語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。機器在須要更少的人類干預的狀況下可以研究和收集信息,讓網頁可以被機器理解,最終讓人類受益。即用正確的標籤作正確的事。

二、語義化的好處或者說存在的意義

① 有利於搜索引擎抓取

② 結構清晰的HTML在團隊合做中的做用：代碼可讀、便於維護、提升開發效率、快速達成共識、利於二次開發。

③ 有利於盲人屏幕閱讀器

2、css、js文件數量及大小

優化通常對於css、js是建議使用外聯式來進行導入。咱們能夠對css、js作相應的規劃也能夠減小css、js的個數以減小http請求。同時也要注重減小重複代碼，注重代碼重複利用，以達到用最少的代碼幹最多的事。同時當項目要投入上線使用的時候，能夠對css、js文件進行壓縮，文件的減少能夠加速文件的連接導入，以便加速網頁的加載渲染。

經過在線網站對html，css，js文件壓縮可參考資料：前端性能優化（一）-- 文件的壓縮與合併

可經過使用webpack，gulp等工具對Js文件進行合併。

3、圖片的數量和大小

多個服務器請求會對站點的性能產生顯著的影響。對一張圖片進行導入又是一個http請求，所以咱們應該減小圖片的導入數量以便減小http請求。此處，咱們必須提到一個名詞「css精靈spirit」。css精靈是指包含多個不一樣的圖標、按鈕或圖形的單個圖像。所以咱們能夠把多張背景圖片合併爲一張而後對背景圖片進行相應的定位。同時使用PNG8格式的圖片相對於GIF來講比較少。而對於內容圖片，能夠對其進行適當的壓縮，能夠加快文檔內容加載，或者若是是須要用戶下載的圖片，小的圖片能夠加快用戶下載的速度。

使用較爲普遍的web圖片格式有：JPEG/JPG、PNG、WEBP、Base6四、SVG。

1.JPEG/JPG

特色是有損壓縮，體積小，加載快，不支持透明。

使用場景：JPG適合用於呈現熱菜豐富的圖片，在平常的開發中，JPG圖片常常做爲大的背景圖、輪播圖或是Banner圖。好比兩大電商網站對大圖片的處理，就是對JPG圖片應用場景的最佳寫照。用JPG來呈現大圖片，既能夠保留圖片的質量，又不會擔憂圖片的體積，是一種比較普遍使用的方案。

缺點：在處理一些矢量圖形和logo等這些線條感很強、顏色對比強烈的圖片時，認爲壓縮就致使圖片模糊很是明顯。另外，JPG圖像不支持透明度處理，透明圖片只能用PNG來呈現了。

2.PNG-8和PNG-24

特色是無損壓縮、質量高、體積大、支持透明

優勢：無損壓縮的高保真圖片格式。8和24都是二進制數的位數，8位的PNG支持256中顏色，24位的PNG能夠支持1600萬種顏色。在不考慮文件大小隻在意最佳的顯示效果時，推薦使用PNG-24。可是在適合使用PNG時會優先選擇PNG-8

應用場景：主要用PNG來呈現小的LOGO、顏色簡單對比強烈的圖片或是背景。

3.SVG

特色是文本文件，體積小，不失真，兼容性好

優勢：SVG是一種基於XML語法的圖像格式。SVG對圖像的處理不是基於像素，而是基於對圖像的形狀描述。

和JPG、PNG相比較，SVG文件體積更小，可壓縮性更強。SVG做爲矢量圖最大的優勢在於圖片能夠無限放大還不失真，一張SVG圖片能夠適配多種分辨率。另外SVG是文本文件，能夠像寫代碼同樣定義SVG，放在HTML中稱爲DOM的一部分。也能夠把對圖像的描述寫入以.svg爲後綴的文件中，在img標籤中引入便可。<img src="文件名.svg" alt="">

4.WebP

優勢：WebP是一款比JPG、PNG等在壓縮方面更加優越的圖片格式，同時也不會影響其圖片質量，使用該格式時最好將同名文件格式化，當檢測瀏覽器不兼容時自動切換jpg格式

缺點：是一個相對較新的技術，因此對於目前市面上的瀏覽器可否完美的兼容，其可用和實用性就變得很現實了，再好的東西若是沒有好的兼容性，也是很是難以普及和被普遍使用的

5.Base64

優勢：減小請求，加快首屏數據顯示。對於jpg格式的圖片，每個圖片至關於一次http請求，圖片多了的話，服務器耗性能比較嚴重。而將jpg轉化成base64格式的圖片，則極大地減小了請求數，由於Base是文本格式。

缺點：base64格式圖片比原圖大，佔用更多存儲空間，同時，瀏覽器不會對該資源緩存。

使用方法：background:url(data:image/png;base64,{img_data})

應用場景：通常對於小於10KB大小的圖片進行base64轉碼。

 

至於動態圖有GIF與APNG：後者APNG這東西是mozilla搞出來的， 它是24位的，並且也是動圖，能夠容納1680萬種顏色，也是爲了取代GIF，可是....也就火狐支持，IE10和chrome，safari所有不行， 若是說gif圖片是卡片機的話， APNG就是單反， 測試瀏覽器是否支持apng格式

4、有效性驗證

除了根據語義加標記以外，HTML文檔還須要用有效的代碼來編寫，若是代碼是無效的，瀏覽器會嘗試解釋標記自己，有時候會產生錯誤的結果。更糟的是，若是發送具備正確的MIME類型的XHTML文檔，理解XML的瀏覽器將不顯示無效的頁面。由於瀏覽器須要知道要使用什麼DTD（文檔類型定義）才能正確地處理頁面，因此對頁面進行有效性驗證要求有DOCTYPE聲明。

有效性驗證工具徑：
① W3C驗證器（bookmarklet），這是一小段能夠存儲在瀏覽器的書籤或收藏夾中的Javascript。單擊這個書籤就會觸發Javascript動做。

②能夠訪問http://validator.w3.org/，經過輸入本身的URL來對本身的站點來進行在線驗證。

③使用firefox瀏覽器的能夠下載插件Firefox Web Developer Extension

5、雅虎的Web優化最佳實踐

一、內容優化

① 儘可能減小HTTP請求：常見方法包括合併多個CSS文件和JavaScript文件，利用CSS Sprites整合圖像，Image map（圖像中不一樣的區域設置不一樣的連接），內聯圖象（使用 data: URL scheme 在實際的頁面嵌入圖像數據）等。
② 減小DNS查找，通常dns查找須要花費20-120ms，Windows的DNS緩存，能夠經過ipconfig /displaydns 這個命令來查看。詳細資料http://www.chinaz.com/web/2015/0417/399728.shtml
③ 避免重定向
④ 使Ajax可緩存
⑤ 延遲加載組件：考慮哪些內容是頁面呈現時所必需首先加載的、哪些內容和結構能夠稍後再加載，根據這個優先級進行設定。
⑥ 預加載組件：預加載是在瀏覽器空閒時請求未來可能會用到的頁面內容（如圖像、樣式表和腳本）。當用戶要訪問下一個頁面時，頁面中的內容大部分已經加載到緩存中了，所以能夠大大改善訪問速度。
⑦ 減小DOM元素數量：頁面中存在大量DOM 元素，會致使JavaScript遍歷DOM的效率變慢。
⑧根據域名劃分頁面內容：把頁面內容劃分紅若干部分可使你最大限度地實現平行下載。但要確保你使用的域名數量在2個到4個之間（不然與第2條衝突）。
⑨ 最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另外一個網站中。但其建立速度比其餘包括JavaScript和CSS的DOM元素的建立慢了1-2個數量級。
⑩ 避免404：HTTP請求時間消耗是很大的，所以使用HTTP請求來得到一個沒有用處的響應（例如404沒有找到頁面）是徹底沒有必要的，它只會下降用戶體驗而不會有一點好處。

二、服務器優化

① 使用內容分發網絡（CDN）：把你的網站內容分散到多個、處於不一樣地域位置的服務器上能夠加快下載速度。
添加Expires或Cache-Control信息頭：對於靜態內容，可設置文件頭過時時間Expires的值爲「Never expire（永不過時）」；對於動態內容，可以使用恰當的Cache-Control文件頭來幫助瀏覽器進行有條件的請求。
② Gzip壓縮
③ 設置ETag：ETags（Entity tags，實體標籤）是web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制。
④ 提早刷新緩衝區：當用戶請求一個頁面時，服務器會花費200到500毫秒用於後臺組織HTML文件。在這期間，瀏覽器會一直空閒等待數據返回。在PHP中，可使用flush()方法，它容許你把已經編譯的好的部分HTML響應文件先發送給瀏覽器，這時瀏覽器就會能夠下載文件中的內容（腳本等）然後臺同⑤時處理剩餘的HTML頁面。
⑥ 對Ajax請求使用GET方法：當使用XMLHttpRequest時，瀏覽器中的POST方法會首先發送文件頭，而後才發送數據。所以使用GET最爲恰當。
⑦ 避免空的圖像src

三、Cookie優化

① 減少cookie大小：去除沒必要要的coockie，並使coockie體積儘可能小以減小對用戶響應的影響
② 針對Web組件使用域名無關的Cookie：對靜態組件的Cookie讀取是一種浪費，使用另外一個無Cookie的域名來存放靜態組件是一個好方法，或者也能夠在Cookie中只存放帶www的域名。

四、CSS優化

① 將CSS代碼放在HTML頁面的頂部
② 避免使用CSS表達式：CSS表達式在執行時候的運算量很是大，會對頁面性能產生大的影響
③ 使用<link>來代替@import
④ 避免使用Filters：IE獨有屬性AlphaImageLoader用於修正IE 7如下版本中PNG圖片的半透明效果，但它的問題在於瀏覽器加載圖片時它會終止內容的呈現而且凍結瀏覽器。

五、JavaScript優化

① 將JavaScript腳本放在頁面的底部
② 將JavaScript和CSS做爲外部文件來引用：在實際應用中使用外部文件能夠提升頁面速度，由於JavaScript和CSS文件都能在瀏覽器中產生緩存。
③ 縮小JavaScript和CSS
④ 刪除重複的腳本
⑤ 最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
⑥ 開發智能的事件處理程序

六、圖像優化

① 優化圖片大小
② 經過CSS Sprites優化圖片
③ 不要在HTML中使用縮放圖片
④ favicon.ico要小並且可緩存

七、針對移動優化

① 保持組件大小在25KB如下：主要是由於iPhone不能緩存大於25K的文件（注意這裏指的是解壓縮後的大小）。
② 將組件打包成爲一個複合文檔：把頁面內容打包成複合文本就如同帶有多附件的Email，它可以使你在一個HTTP請求中獲取多個組件。

 

 參考資料：

http://www.javashuo.com/article/p-eferhlqu-v.html

https://developer.yahoo.com/performance/rules.html

https://github.com/creeperyang/blog/issues/1

https://developer.yahoo.com/performance/rules.html