前端如何優化網站性能？

一、減小 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 替換