前端需要性能優化麽？ 性能優化一直以來都是前端工程領域中的一個重要部分。很多資料表明，網站應用的性能優化對於提高用戶留存、轉化率等都有積極影響。可以理解為，提升你的網站性能，就是提升你的業務數據（甚至是業務收入）。 性能優化廣義上包含前端優化和後端優化。後端優化的關註點更多的時候是在增加資源利用率、 ...
前端需要性能優化麽？
性能優化一直以來都是前端工程領域中的一個重要部分。很多資料表明，網站應用的性能優化對於提高用戶留存、轉化率等都有積極影響。可以理解為，提升你的網站性能，就是提升你的業務數據（甚至是業務收入）。
性能優化廣義上包含前端優化和後端優化。後端優化的關註點更多的時候是在增加資源利用率、降低資源成本以及提高穩定性上。相較於後端，前端的性能優化會更直接與用戶的體驗掛鉤。從用戶體驗側來說，前端服務 5s 的載入時間優化縮減 80%(1s) 與後端服務 50ms 的響應優化縮減 80%(10ms) 相比，用戶的體驗提升會更大。因此很多時候，與體驗相關的性能的瓶頸會出現在前端。
我和一些同學接觸的過程中，發現作為前端工程師，大家其實都具備一定的性能優化意識，同時也有自己的優化“武器庫”，例如懶載入、資源合併、避免 reflow 等等。雖然大家對性能優化都有自己的思路，不過大多是分散在某幾個點，較難形成一個完整的體系。業界也有很多優質的資料，例如雅虎的性能優化 35 條，但是性能優化作為一個系統性工程，大家想要系統性地去學習並不容易。
一、html文檔結構標簽語義化
1、首先什麼是語義化呢？
語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。機器在需要更少的人類干預的情況下能夠研究和收集信息,讓網頁能夠被機器理解,最終讓人類受益。即用正確的標簽做正確的事。
2、語義化的好處或者說存在的意義
① 有利於搜索引擎抓取
② 結構清晰的HTML在團隊合作中的作用：代碼可讀、便於維護、提高開發效率、快速達成共識、利於二次開發。
③ 有利於盲人屏幕閱讀器
二、css、js文件數量及大小
優化一般對於css、js是建議使用外聯式來進行導入。我們可以對css、js做相應的規劃也可以減少css、js的個數以減少http請求。同時也要註重減少重覆代碼，註重代碼重覆利用，以達到用最少的代碼乾最多的事。同時當項目要投入上線使用的時候，可以對css、js文件進行壓縮，文件的減小可以加速文件的鏈接導入，以便加速網頁的載入渲染。
通過線上網站對html，css，js文件壓縮可參考資料：前端性能優化（一）-- 文件的壓縮與合併
可通過使用webpack，gulp等工具對Js文件進行合併。
三、圖片的數量和大小
多個伺服器請求會對站點的性能產生顯著的影響。對一張圖片進行導入又是一個http請求，因此我們應該減少圖片的導入數量以便減少http請求。此處，我們必須提到一個名詞“css精靈spirit”。css精靈是指包含多個不同的圖標、按鈕或圖形的單個圖像。因此我們可以把多張背景圖片合併為一張然後對背景圖片進行相應的定位。同時使用PNG8格式的圖片相對於GIF來說比較少。而對於內容圖片，可以對其進行適當的壓縮，可以加快文檔內容載入，或者如果是需要用戶下載的圖片，小的圖片可以加快用戶下載的速度。
使用較為廣泛的web圖片格式有：JPEG/JPG、PNG、WEBP、Base64、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格式
四、有效性驗證
除了根據語義加標記之外，HTML文檔還需要用有效的代碼來編寫，如果代碼是無效的，瀏覽器會嘗試解釋標記本身，有時候會產生錯誤的結果。更糟的是，如果發送具有正確的MIME類型的XHTML文檔，理解XML的瀏覽器將不顯示無效的頁面。因為瀏覽器需要知道要使用什麼DTD（文檔類型定義）才能正確地處理頁面，所以對頁面進行有效性驗證要求有DOCTYPE聲明。
有效性驗證工具徑：
① W3C驗證器（bookmarklet），這是一小段可以存儲在瀏覽器的書簽或收藏夾中的Javascript。單擊這個書簽就會觸發Javascript動作。
②可以訪問http://validator.w3.org/，通過輸入自己的URL來對自己的站點來進行線上驗證。
③使用firefox瀏覽器的可以下載插件Firefox Web Developer Extension
五、雅虎的Web優化最佳實踐
1、內容優化
① 儘量減少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沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。
2、伺服器優化
① 使用內容分髮網絡（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
3、Cookie優化
① 減小cookie大小：去除不必要的coockie，並使coockie體積儘量小以減少對用戶響應的影響
② 針對Web組件使用功能變數名稱無關的Cookie：對靜態組件的Cookie讀取是一種浪費，使用另一個無Cookie的功能變數名稱來存放靜態組件是一個好方法，或者也可以在Cookie中只存放帶www的功能變數名稱。
4、CSS優化
① 將CSS代碼放在HTML頁面的頂部
② 避免使用CSS表達式：CSS表達式在執行時候的運算量非常大，會對頁面性能產生大的影響
③ 使用<link>來代替@import
④ 避免使用Filters：IE獨有屬性AlphaImageLoader用於修正IE 7以下版本中PNG圖片的半透明效果，但它的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。
5、JavaScript優化
① 將JavaScript腳本放在頁面的底部
② 將JavaScript和CSS作為外部文件來引用：在實際應用中使用外部文件可以提高頁面速度，因為JavaScript和CSS文件都能在瀏覽器中產生緩存。
③ 縮小JavaScript和CSS
④ 刪除重覆的腳本
⑤ 最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
⑥ 開發智能的事件處理程式
6、圖像優化
① 優化圖片大小
② 通過CSS Sprites優化圖片
③ 不要在HTML中使用縮放圖片
④ favicon.ico要小而且可緩存
7、針對移動優化
① 保持組件大小在25KB以下：主要是因為iPhone不能緩存大於25K的文件（註意這裡指的是解壓縮後的大小）。
② 將組件打包成為一個複合文檔：把頁面內容打包成複合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中獲取多個組件。
參考資料：
https://www.cnblogs.com/diligenceday/p/4472035.html
https://developer.yahoo.com/performance/rules.html
https://github.com/creeperyang/blog/issues/1
https://developer.yahoo.com/performance/rules.html
