 |
VOOZH | about |
|
VOOZH | about |
作者：HaoyCn
網址：http://segmentfault.com/a/1190000003821219
陸續整理和不斷更新網絡上給出的前端性能的優化方案。
這裡只是做一個總概括式的索引，每一個方案都十分值得推敲和細說。
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
選擇器
選擇器效率排行如下：
效率與優先級並不是對等關係，優先級高的不一定效率高。如 #id.class 合用比 單個 #id 的優先級高，但效率卻比值慢。
選擇器書寫建議是：
避免使用通配符
不使用標籤名或類名修飾ID規則：如果規則使用ID選擇器作為關鍵選擇器，不要給規則添加標籤名。因為ID本身就是唯一的，添加標籤名會不必要地降低匹配效率
不使用標籤名修飾類：相較於標籤，類更具獨特性
儘量選擇最具體的方式：造成低效的最簡單粗暴的原因就是在標籤上使用太多規則。給元素添加類可以更快細分到類方式，可以減少規則去匹配標籤的時間
關於後代選擇器和子選擇器：避免使用後代選擇器，非要用的話建議用子選擇器代替，但子選擇器也要慎用，標籤規則永遠不要包含子選擇器
利用可繼承性：沒必要在一般內容上聲明樣式
避免濾鏡、表達式、Hack
效率低。
Sprites
合併圖片可減少 HTTP 請求。其他建議有：
Sprite 中水平排列圖片，垂直排列會增加文件大小
Sprite 中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於256色以便適用PNG8格式
不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小,但對於用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。100×100的圖片為1萬像素，1000×1000就是100萬像素
使用3D動畫
使用 transform: translate3d 等可加速 GPU 渲染。
4 JavaScript
渲染中可能存在的高成本操作：
修改、增加、刪除DOM節點
移動DOM位置或者動畫效果
CSS樣式修改（重繪比重排好些）
調整窗口大小，或者滾動時有絕對定位、fixed 背景以及動畫
修改頁面默認字體
瀏覽器一般會緩存Render Tree的更新渲染，但以下情況除外：
調整窗口大小和修改頁面默認字體
client/offset/scroll
getComputedStyle currentStyle
優化建議：
修改 className 而非 style
離線 DOM 後修改，如 documentFragment 或者 display:none 後再調整樣式
緩存屬性值
動畫使用 absolute/fixed
不使用 table 布局（牽一髮動全身）
修改層級比較低的 DOM
事件委託
將多個節點上的事件放到其父節點（經典案例：將 li 上的事件綁定到 ul 上）。
內存管理
合理釋放和緩存內存。如緩存復用的屬性，接觸對象引用等。
5 資源
壓縮大小
壓縮樣式、腳本、圖像等資源的大小。
針對圖像資源，可從預覽小圖、格式選擇等多角度優化。
懶加載
如圖像的懶加載（滾動到顯示區域後才加載）等。
預加載
針對之後會用到的資源提前加載。
6 客戶端
localStorage 緩存
相比 cookies，localStorage 存儲容量更大。可以將一些靜態資源（如 jQuery庫）等緩存。