從輸入url開始分析-前端性能優化

時間 2019-11-08

原文原文鏈接

前端性能的一個重要指標是頁面加載時間，不只事關用戶體驗，也是搜索引擎排名考慮的一個因素。css

來自 Google 的數據代表，一個有 10 條數據 0.4 秒能加載完的頁面，變成 30 條數據 0.9 秒加載完以後，流量和廣告收入降低 90%。 Google Map 首頁文件大小從 100KB 減少到 70-80KB 後，流量在第一週漲了 10%，接下來的三週漲了 25%。亞馬遜的數據代表：加載時間增長 100 毫秒，銷量就降低 1%。html

前言

關於前端性能優化的文章的看的很多，可是大部分文章都是淺嘗輒止或者是零零散散的優化手段拼湊在一塊兒。這篇文章將從<從輸入Url到瀏覽器完成頁面渲染>的角度分析每個過程當中能夠進行哪些性能優化？前端

前端性能指標

首先先來了解一下三個重要的性能指標:ajax

白屏時間:用戶從打開頁面開始到有頁面開始呈現爲止。
首屏時間:用戶從打開頁面開始到首屏頁面所有加載且渲染完成。
用戶可操做時間: 用戶能夠進行正常的事件輸入交互操做。

從輸入Url到頁面渲染過程

相信能點進這篇文章的盆友對整個過程確定有充分的瞭解。接下來我將逐一對每一個階段能進行哪些優化進行分析~瀏覽器

DNS解析： 用戶輸入URL後，瀏覽器要查詢域名對應的ip地址，這個過程要花費20-120ms。DNS查詢完成以前，瀏覽器沒法從服務器下載任何數據。
緩存

優化方案: 經過瀏覽器配置引入DNS緩存性能優化

發送HTTP請求:服務器

Web 前端 80% 的響應時間花在圖片、樣式、腳本等資源下載上。瀏覽器對每一個域名的鏈接數是有限制的，減小HTTP請求次數是縮短響應時間的關鍵。cookie

優化方案 : 核心在於減小HTTP請求，以及減小請求大小。網絡
1. 合併 JavaScript、CSS 等文件；
2. CSS Sprite--將背景圖片合併成一個文件，經過background-image和background-positon來減小HTTP請求(HTTP2.0能夠並行發送HTTP請求後，這個方案再也不適用)
3. 引入HTTP緩存(配置cache-control或Etag)
4. 避免圖片 src 爲空。src 屬性爲空字符串，但瀏覽器仍然會向服務器發起一個 HTTP 請求
5. Ajax 請求使用 GET 方法。瀏覽器執行 POST 請求時分紅兩步，先發送 Header，再發送數據。而 GET 只使用一個 TCP 數據包發送數據，因此首選 GET 方法。並且Get方法能夠緩存ajax響應結果。
6. 懶加載。
7. 減小cookie大小
服務器處理請求並返回資源

網站 80-90% 響應時間消耗在資源下載上，減小資源下載時間是性能優化的黃金髮則。

優化方案 : 壓縮響應文件大小，以及加快服務器的響應資源的速度
- 使用CDN(內容分發網絡)，將靜態資源部署在CDN上
- 啓用 Gzip。 Gzip 壓縮一般能夠減小 70% 的響應大小，對某些文件更可能高達 90%
頁面渲染過程

頁面渲染過程: 構建DOM樹 -> 構建CSS規則樹 -> 構建渲染樹 -> 構建layout樹 -> 計算layOut -> Painting

優化方案: 從對減小DOM操做以及避免阻塞的角度進行優化

把css樣式表放在<head>中, js腳本放在頁面底部。把樣式表放在中可讓頁面漸進渲染。瀏覽器下載腳本時，會阻塞其餘資源並行下載。所以，最好將腳本放在底部，以提升頁面加載速度。
儘量減小DOM操做。
減小repaint(重流)與reflow(重繪)。
使用事件委託，減小綁定事件監聽的節點。
使用CSS3動畫時用transform來代替margin或絕對定位的top，left值。
不要使用CSS表達式，用link代替`import
使用外部js、css。外部JS與CSS能夠被瀏覽器緩存，能夠在不一樣頁面間重用。
涉及到高頻率的操做，能夠考慮引進節流防抖進行優化。