前端性能優化總結

記錄性能優化相關的知識。

Chrome DevTools — Network

DOMContentLoaded： DOM樹構建完成的時間
Load: 頁面加載完畢。即DOM樹構建完成後，加載完圖片等外部資源的時間
Finish: 是頁面上全部 HTTP 請求發送到響應完成的時間

Waterfall

根據 HTTP 請求的不一樣階段來進行排序

Start Time：請求開始的時間
Response Time：資源開始下載的時間
End Time：請求結束的時間
Total Duration：請求整個完整過程的時間
Latency 請求等待響應的時間

以下圖所示，Waterfall 右鍵以後選擇 Total Duration，則請求按照整個持續時間排序，不一樣的顏色表明不一樣的資源文件，淺色的部分表明資源的等待時間，深色的部分表明下載時間。

懶加載

1、爲何要用懶加載？

2、懶加載的實現原理

1. 首先，將圖片的地址放在其它屬性(data-url)中，而不是 src。
2. 頁面加載時根據 scrollTop 的值判斷圖片是否在可視區域,若是在可視區域，則將 data-url 屬性中的值取出存放到src屬性中（首屏的圖片能夠直接加載）。
3. 在滾動過程當中，判斷圖片是否在可視區域，若是在，則將 data-url 屬性中的值放到 src 屬性中。

圖片優化

圖片優化的幾種方式：

CSS Sprite 和 BASE64 的對比

各個類型圖片的對比

延遲加載第三方 JS

• defer 屬性：渲染 DOM 的過程將和 JS 腳本加載的過程異步進行，可是 JS 腳本的執行要在全部元素解析完成以後（只適用於外部腳本文件）
• async 屬性：加載和渲染 DOM 的過程將和 JS 腳本的加載與執行的過程異步進行（只適用於外部腳本文件）
• defer 按照加載順序執行腳本文件，async 則不會按照聲明順序執行

具體區別見下圖：

綠色線表明 HTML 解析；藍色線表明 JS 腳本讀取時間；紅色線表明 JS 腳本執行時間。

Preload 和 Prefetch

preload 提供了一種聲明式的命令，讓瀏覽器提早加載指定資源(加載後並不執行)，在須要執行的時
候再執行。

• 將加載和執行分離開，不阻塞渲染和 document 的 onload 事件
• 提早加載指定資源

使用：

prefetch: 告訴瀏覽器將來可能會使用到的某個資源，瀏覽器就會在閒時去加載對應的資源。

使用：

Gzip -> Brotil

Brotli 壓縮算法具備多個特色，最典型的是如下 3 個：

• 針對常見的 Web 資源內容，Brotli 的性能相比 Gzip 提升了 17-25%；
• 當 Brotli 壓縮級別爲 1 時，壓縮率比 Gzip 壓縮等級爲 9（最高）時還要高；
• 在處理不一樣 HTML 文檔時，Brotli 依然可以提供很是高的壓縮率。

DNS預解析

默認狀況下瀏覽器會對頁面中和當前域名不在同一個域的域名進行預獲取，而且緩存，這就是隱式的 DNS Prefetch。若是想對頁面中沒有出現的域進行預獲取，那麼就要使用顯示的 DNS Prefetch 。

DNS 預解析是瀏覽器試圖在用戶訪問連接以前解析域名,若是一個頁面有多個域名的連接，DNS 預解析會在用戶點擊連接以前，使用最少的CPU和網絡在後臺進行解析。當用戶點擊已經預解析的域名時，能夠平均減小 200 ms 的等待時間，提高用戶體驗 。

<meta http-equiv="x-dns-prefetch-control" content="on">
 <link rel="dns-prefetch" href="//domain.com">

參考文檔：

https://segmentfault.com/a/11...
DNS預解析: https://www.cnblogs.com/golov...