前端性能優化經常使用方案

===前端開發性能優化方案===
減小HTTP請求次數和請求大小
代碼優化
->有利於SEO
->有利於擴展維護
->有利於減小性能消耗
[JS代碼優化的108條建議] [雅虎CSS優化的36條建議]
...
DNS及HTTP通訊方式的優化

1.在JS中儘可能減小閉包的使用（緣由：閉包會產生不釋放的棧內存）
A:循環給元素作事件綁定的時候，儘量的把後期須要的信息（例如索引）存儲到元素的自定義屬性上，而不是建立閉包存儲
B:能夠在最外層造成一個閉包，把一些後續須要的公共信息進行存儲，而不是每個方法都建立閉包(例如單例模式)
C:儘量的手動釋放不被佔用的內存
...

2.儘可能合併CSS和JS文件（把須要引入的CSS合併爲一個，JS也是合併爲一個），原理是在減小HTTP請求次數，儘量的把合併後的代碼進行壓縮，減少HTTP請求資源的大小
A:webpack這種自動化構建工具，能夠幫咱們實現代碼的合併和壓縮（工程化開發）
B:在移動開發(或者追求高性能的PC端開發[例如百度首頁])，若是CSS或者JS不是須要不少，咱們能夠選擇把css和js編程內嵌式（也就是代碼直接寫在HTML中）

3.儘可能使用字體圖標或者SVG圖標，來代替傳統的PNG等格式的圖片（由於字體圖標等是矢量圖(基於代碼編寫出來的)，放大不會變形，並且渲染速度快，相對比位圖要小一些）

4.減小對DOM的操做（主要是減小DOM的重繪和迴流(重排)）
A:關於重排的分離讀寫
B:使用文檔碎片或者字符串拼接作數據綁定(DOM的動態建立)

5.在JS中避免「嵌套循環」（這種會額外增長不少循環次數）和「死循環」（一旦遇到死循環瀏覽器就卡殼了）

6.採用圖片的「懶加載」（延遲加載）
目的是爲了減小頁面「第一次加載」過程當中HTTP的請求次數，讓頁面打開速度變快
步驟：開始加載頁面的時候，全部的真實圖片都不去發送HTTP請求加載，而是給一張佔位的背景圖，當頁面加載完，而且圖片在可視區域內咱們再去作圖片加載

7.利用瀏覽器和服務器端的緩存技術(304緩存)，把一些不常常更新的靜態資源文件作緩存處理（例如：JS、CSS、靜態圖片等均可以作緩存）
原理是爲了減小HTTP請求大小，讓獲取速度更快

8.儘量使用事件委託(事件代理)來處理事件綁定的操做，減小DOM的頻繁操做，其中包括給每個DOM元素作事件綁定

9.儘可能減小CSS表達式的使用(expression)

#myDiv {
    position: absolute;
    width: 100px;
    height: 100px;
    left: expression(document.body.offsetWidth - 110 + "px");
    top: expression(document.body.offsetHeight - 110 + "px");
    background: red;
  }

10.CSS選擇器解析規則是從右向左解析

.container .link a{
    先找到全部的A，再篩選是在.link樣式類中的，再次篩選是在.container樣式類中的... 先找到的是全部的A，操做起來是消耗性能的，咱們在使用CSS選擇器的時候儘量減小對標籤選擇器的使用
 }

11.CSS雪碧圖技術(css sprite / css 圖片精靈)
把全部相對較小資源圖片彙總到一張大圖上，後期咱們只須要把大圖加載下來，用背景定位的方式展現對應的小圖便可

.bg{
    background:url('xxx.png');
  }
  .box1{
     background-position:xx xx;
  }
  .box2{
     background-position:xx xx;
  }

  <div class='bg box1'></div>

13.減小對於COOKIE的使用（最主要的是減小本地COOKIE存儲內容的大小），由於客戶端操做COOKIE的時候，這些信息老是在客戶端和服務器端傳來傳去

14.頁面中的數據獲取採用異步編程和延遲分批加載
使用異步獲取數據，是爲了下降HTTP通道的堵塞，不會由於數據沒有請求回來耽誤下面信息的渲染，提升頁面的打開速度（咱們能夠這樣處理：須要動態綁定數據的區域先隱藏，等數據返回而且綁定完成後在讓其顯示）
延遲分批加載相似於圖片懶加載，是爲了減小第一次頁面加載時候的HTTP請求次數

15.頁面中出現音視頻標籤，咱們不讓頁面加載的時候就去加載這些資源（要否則頁面加載速度會變慢）（方案：只須要設置 preload='none' 便可），等待頁面加載完成，音視頻播放的時候咱們在去加載音視頻資源

16.在客戶端和服務器端進行信息交互的時候，對於多項數據咱們儘量基於JSON格式來進行傳送（JSON格式的數據處理方便，資源偏小） ==>相對於XML格式的傳輸纔會有這個優點

17.儘量實現JS的封裝（低耦合高內聚），減小頁面中的冗餘代碼（減小HTTP請求資源的大小）

20.CSS中設置定位後，最好使用Z-INDEX改變盒子的層級，讓全部的盒子不在相同的平面上，這樣後續處理的時候，性能有那麼一丟丟的提升

21.在基於AJAX的GET請求進行數據交互的時候，根據需求可讓其產生緩存（這個緩存不是304緩存），這樣下一次從相同地址獲取的數據是上一次緩存的數據（可是不多用，項目中通常刻意清除這個緩存的時候偏多）

22.儘可能減小對於filter濾鏡屬性的使用(這個屬性消耗性能較大一些)

23.在CSS導入的時候儘可能減小使用@import導入式，由於@import是同步操做，只有把這個對應的CSS導入，纔會向下加載，而link是異步操做

24.配置ETag(有點相似於304緩存)

25.使用window.requestAnimationFrame（JS中的幀動畫）代替傳統的定時器動畫

26.減小遞歸的使用，避免死遞歸，避免因爲遞歸致使的棧內存嵌套（建議使用尾遞歸）

27.避免使用iframe（不只很差管控樣式，並且至關於在A頁面中加載了其它頁面，消耗較大）

28.利用H5中提供的localstorage本地存儲或者是manifest離線緩存，作一些信息的本地存儲，下一次加載頁面的時候直接從本地獲取，減小HTTP請求次數

29.基於SCRIPT調取JS的時候，可已使用 defer或者async 來異步加載

重量級優化：作CDN加速（燒錢機器）

===額外技巧===
1.咱們通常都把CSS放到BODY上，把JS放到BODY下面（緣由：讓其先加載CSS在加載JS，先加載CSS是爲了保證頁面渲染的過程當中，元素是帶着樣式渲染的，而JS通常都是用來操做DOM元素的，須要等到元素加載完再操做）

2.能用CSS搞定的絕對不用JS，能用原生JS搞定的絕對不用插件，絕對不使用FLASH（除了音視頻的低版本瀏覽器播放）
=>CSS處理動畫等功能的性能優於JS，並且CSS中的transform變形還開起了硬件加速

3.JS中儘可能減小對EVAL的使用，由於JS合併壓縮的時候，可能出現因爲符號不完善，致使的代碼執行優先級錯亂問題，EVAL處理起來消耗的性能也是偏大一點的

4.使用keep-alive實現客戶端和服務器端的長鏈接

5.儘可能使用設計模式來管理咱們的代碼（單例、構造、Promise、發佈訂閱），方便後期的升級和維護

6.開啓服務器端的gzip壓縮（這個壓縮能夠有效減小請求資源文件的大小），其實客戶端的圖片等資源也是能夠進行壓縮的（可是對於24位的位圖，壓縮後可能會變模糊）

7.頁面中不要出現無效的連接（利於SEO優化），還有其它技巧：提升關鍵字曝光率、img須要加alt、設置meta標籤、標籤語義化...

8.避免使用with語句（很是耗性能）

============================================

個人博客即將同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3jqjoysz8tc08