Hello,大家好，今天給大家分享下前端性能優化的方法，總共有以下幾點。

減少 HTTP 請求數量
　　　在瀏覽器與服務器進行通信時，主要是通過 HTTP 進行通信。瀏覽器與服務器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資源文件並發請求數量有限（不同瀏覽器允許並發數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網站性能進行優化。

CSS Sprites

俗稱CSS精靈，這是將多張圖片合並成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節數。

合並 CSS 和 JS 文件

現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發布前將多個CSS或者多個JS合並成一個文件。

采用 lazyLoad

俗稱懶加載，可以控制網頁上的內容在一開始無需加載，不需要發請求，等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。

控制資源文件加載優先級
瀏覽器在加載HTML內容時，是將HTML內容從上至下依次解析，解析到link或者script標簽就會加載href或者src對應鏈接內容，為了第一時間展示頁面給用戶，就需要將CSS提前加載，不要受 JS 加載影響。一般情況下都是CSS在頭部，JS在底部。

利用瀏覽器緩存
瀏覽器緩存是將網絡資源存儲在本地，等待下次請求該資源時，如果資源已經存在就不需要到服務器重新請求該資源，直接在本地讀取該資源。

減少重排（Reflow）
基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如果Reflow的過於頻繁，CPU使用率就會急劇上升。

減少Reflow，如果需要在DOM操作時添加樣式，盡量使用 增加class屬性，而不是通過style操作樣式。

減少 DOM 操作

圖標使用 IconFont 替換

如果還有補充·，請評論，謝謝

前端性能如何優化