前端性能優化彙總

性能優化：

1、減小請求資源大小或者次數　

一、儘可能和並和壓縮css和js文件。（將css文件和併爲一個。將js合併爲一個）
　　緣由：主要是爲了減小http請求次數以及減小請求資源的大小
　　打包工具：
　　webpack
　　gulp
　　grunt
.　　....
二、儘可能所使用的字體圖標或者SVG圖標來代替傳統png圖
　　由於字體圖標或者SVG是矢量圖，代碼編寫出來的，方大不會變形，並且渲染速度快

三、採用圖片的懶加載（延遲加載）
　　目的爲了，減小頁面第一次加載過程當中http的請求次數
　　具體步驟：
　　　　一、頁面開始加載時不去發送http請求，而是放置一張佔位圖
　　　　二、當頁面加載完時，而且圖片在可視區域再去請求加載圖片信息

四、能用css作的效果，不要用js作，能用原生js作的，不要輕易去使用第三方插件。
　　避免引入第三方大量的庫。而本身卻只是用裏面的一個小功能

五、使用雪碧圖或者是說圖片精靈
　　把全部相對較小的資源圖片，繪製在一張大圖上，只須要將大圖下載下來，而後利用
　　圖片定位來說小圖展示在頁面中（background-position:百分比，數值）

六、減小對cookie的使用（最主要的就是減小本地cookie存儲內容的大小），由於客戶端操做cookie的時候，這些信息老是在客戶端和服務端傳遞。若是上設置不當，每次發送

一個請求將會攜帶cookie

七、前端與後端進行數據交互時，對於多項數據儘量基於json格式來進行傳送。相對於使用xml
　　來講傳輸有這個優點
　　目的：是數據處理方便，資源偏小

八、前端與後端協商，合理使用keep-alive

九、前端與服務器協商，使用響應資源的壓縮

十、避免使用iframe
　　不只很差管控樣式，並且至關於在本頁面又嵌套其餘頁面，消耗性能會更大。由於還回去加載這個嵌套頁面的資源

十一、在基於ajax的get請求進行數據交互的時候，根據需求可讓其產生緩存（注意:這個
緩存不是咱們常看到的304狀態碼，去瀏覽器本地取數據），這樣在下一次從相同地址獲取是數據
時，取得就是上一次緩存的數據。（注意：不多使用，通常都會清空。根據需求來作）

2、代碼優化相關

一、在js中儘可能減小閉包的使用
　　緣由：使用閉包後，閉包所在的上下文不會被釋放

二、減小對DOM操做，主要是減小DOM的重繪與迴流（重排）
　　關於重排（迴流）的分離讀寫：若是須要設置多個樣式，把設置樣式全放在一塊兒設置，不要一條一條的設置。使用文檔碎片或者字符串拼接作數據綁定（DOM的動態建立）

三、在js中避免嵌套循環和"死循環"(一旦遇到死循環，瀏覽器就會直接卡掉)

四、把css放在body上，把js放在body下面
　　讓其先加載css（注意：這裏關於優化沒有多大關係）

五、減小css表達式的使用

六、css選擇器解析規則所示從右往左解析的。減小元素標籤做爲對後一個選擇對象

七、儘可能將一個動畫元素單獨設置爲一個圖層（避免重繪或者回流的大小）
　　注意：圖層不要過多設置，不然不但效果沒有達到反而更差了

八、在js封裝過程當中，儘可能作到低耦合高內聚。減小頁面的冗餘代碼

九、css中設置定位後，最好使用z-index改變盒子的層級，讓盒子不在相同的平面上

十、css導入的時候儘可能減小@import導入式，由於@import是同步操做，只有把對應的樣式導入後，纔會繼續向下加茲安，而link是異步的操做

十一、使用window.requestAnimationFrame(js的幀動畫)代替傳統的定時器動畫
　　若是想使用每隔一段時間執行動畫，應該避免使用setInterval，儘可能使用setTimeout
　　代替setInterval定時器。由於setInterval定時器存在弊端：可能形成兩個動畫間隔時間
　　縮短

十二、儘可能減小使用遞歸。避免死遞歸
　　解決：建議使用尾遞歸

1三、基於script標籤下載js文件時，可使用defer或者async來異步加載

1四、在事件綁定中，儘量使用事件委託，減小循環給DOM元素綁定事件處理函數。

1五、在js封裝過程當中，儘可能作到低耦合高內聚。減小頁面的冗餘代碼

1六、減小Flash的使用

3、存儲

一、結合後端，利用瀏覽器的緩存技術，作一些緩存（讓後端返回304，告訴瀏覽器去本地拉取數據）。（注意：也有弊端）可讓一些不太會改變的靜態資源作緩存。好比：一些圖片，js，cs

二、利用h5的新特性（localStorage、sessionStorage）作一些簡單數據的存儲，
　　避免向後臺請求數據或者說在離線狀態下作一些數據展現。

4、其餘優化

一、避免使用iframe不只很差管控樣式，並且至關於在本頁面又嵌套其餘頁面，消耗性能會更大。由於還回去加載這個嵌套頁面的資源

二、頁面中的是數據獲取採用異步編程和延遲分批加載，使用異步加載是數據主要是爲了不瀏覽器失去響應。若是你使用同步，加載數據很大而且很慢
　　那麼，頁面會在一段時間內處於阻塞狀態。目的：爲了解決請求數據不耽擱渲染，提升頁面的
　　渲染效率。解決方法：須要動態綁定的是數據區域先隱藏，等數據返回而且綁定後在讓其顯示
　　延遲分批加載相似圖片懶加載。減小第一次頁面加載時候的http請求次數

三、頁面中出現音視頻標籤，咱們不讓頁面加載的時候去加載這些資源（不然第一次加載會很慢）
　　解決方法：只須要將音視頻的preload=none便可。
　　目的：爲了等待頁面加載完成時，而且音視頻要播放的時候去加茲安音視頻資源

四、儘可能將一個動畫元素單獨設置爲一個圖層（避免重繪或者回流的大小） 　　注意：圖層不要過多設置，不然不但效果沒有達到反而更差了