前端效能優化

一、減少請求資源的大小或者次數。

1.盡量合併和壓縮js與css檔案。（將css，js合併成乙個檔案）

原因：主要是為了減少請求次數，以及減少請求資源的大小。

工具：webpack，gulp等...

2.盡量使用字型圖示或者svg圖示來代替png。

原因：因為字型圖示或者svg圖示是向量圖，是**編寫出來的，放大不會變形。而且渲染速度會很快。

3.採用的懶載入模式（延遲載入）

目的：為了減少頁面第一次載入過程中http的請求次數。

步驟：（1）頁面開始載入時不去傳送http請求，而是放置一張佔位圖。

（2）當頁面載入完時，並且在可視區域再去請求載入資訊。

4.盡量動態效果盡量使用css，用到必要js時，避免使用較大的第三方外掛程式。

5.使用雪碧圖或者精靈圖。

6.減少對cookie的使用。（主要是減少本地cookie儲存內容的大小），因為客戶端操作cookie的時候這些資訊總是在客戶端和服務端傳遞。如果設定不當，每次傳送請求將會攜帶cookie

7.前端與後端進行資料互動時，對於多項資料盡可能基於json格式來進行傳遞。相對於使用xml來說傳輸有這個優勢。

目的：是資料處理方便，資源偏小。

8.前端與後端協商，合理使用keep-alive

9.前端與伺服器協商，使用響應資源的壓縮。

10.避免使用iframe。不僅不好管控樣式，而且相當於在本頁面又巢狀其他頁面。消耗效能會更大。

11.在基於ajax的get請求進行資料互動的時候，根據需求可以讓其產生快取。

二、**優化相關

1.在js中儘量減少閉包的使用。

原因：使用閉包後，閉包所在的上下文不會被釋放。

2.減少對dom的操作，主要是減少dom的重繪與回流（重排）

關於重排（回流）的分離讀寫：如果需要設定多個樣式，把設定樣式全部放在一起設定，不要一條一條的設定，使用文件碎片或者字串拼接做資料繫結（dom的動態建立）

3.在js中避免巢狀迴圈和『死迴圈』（遞迴要有結束條件，不然造成瀏覽器直接卡死）

4.減少css表示式的使用。

5.js封裝過程中，盡量做到低耦合高內聚。減少頁面的冗餘**。

6.使用window.requestanimationframe(js的幀動畫)代替傳統的定時器動畫，使用定時器盡量使用settimeout避免使用setinterval定時器。因為setinterval存在弊端：可能造成兩個動畫時間間隔縮短。

7.儘量減少使用遞迴。避免死遞迴。建議使用尾遞迴。

8.在事件繫結中，盡可能使用事件委託，減少迴圈給dom元素繫結事件處理函式。

9.減少flash的使用。

三.儲存

1.結合後端，利用瀏覽器的快取技術，做一些快取（讓後端返回304，告訴瀏覽器去本地拉取資料。）（注意：也有弊端）可以讓一些不太會改變的靜態資源做快取。比如：js,cs

2.利用h5的新特性，（localstorage，sessionstorage）做一些簡單的資料儲存，避免想後端請求資料或者說在離線轉態下做一些資料展示。

四.其他優化

1.頁面中的資料採用非同步程式設計和延時分批載入，使用非同步載入資料主要是為了避免瀏覽器造成阻塞失去響應。如果使用同步頁面速度會載入很慢。

那麼頁面會在一段時間內處於阻塞狀態。目的：為了解決請求資料不耽擱渲染，提高頁面的渲染效率。解決方法：需要動態繫結的是資料區域先隱藏。等資料放回並且繫結後在讓其顯示延遲分批載入類似懶載入。減少第一次見面載入時候的http請求次數。