前端效能優化

1.減少http請求數量

1）將多張合併成一張

2）合併css和js檔案

2.壓縮js和css

3.css放頂部，js放底部

瀏覽器在載入 html 內容時，是將 html 內容從上至下依次解析，解析到 link 或者 script 標籤就會載入 href 或者 src 對應鏈結內容，為了第一時間展示頁面給使用者，就需要將 css 提前載入，不要受 js 載入影響。

4.去除重複指令碼

5.減少dom操作

6.懶載入

7.減少重排（reflow）

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

8.圖示使用iconfont替換

9.使用cdn

使用者與伺服器的物理距離對響應時間也有影響。把內容部署在多個地理位置分散的伺服器上能讓使用者更快地載入頁面。內容分發網路（cdn）是一組分散在不同地理位置的web伺服器，用來給使用者更高效地傳送內容。

10.利用瀏覽器快取

瀏覽器快取分強快取和協商快取，他們是將網路資源儲存在本地，等待下次請求該資源時，如果命中就不需要到伺服器重新請求該資源，直接在本地讀取該資源。

1）強快取：在 web 伺服器返回的響應中新增 expires 和 cache-control header。

2）協商快取：通過【last-modified，if-modified-since】和【etag、if-none-match】這兩對 header 分別管理。

11.配置etags

實體標籤（etags），是伺服器和瀏覽器用來決定瀏覽器快取中元件與源伺服器中的元件是否匹配的一種機制，如果etags匹配成功，會返回乙個304狀態碼。

參考：1.