性能優化——從瀏覽器輸入url開始提及

從輸入url開始

1. 判斷是否命中緩存，若是命中緩存，直接由緩存提供資源，不然繼續下面的步驟
2. DNS查詢：解析輸入url對應的IP地址
3. 根據IP創建TCP鏈接，過程當中有3次握手
4. HTTP向服務器發起請求
5. 服務器處理請求，協商緩存——若是請求頭有相應的信息，就能夠不須要從服務器請求資源，直接從瀏覽器讀取緩存的HTML，跳過第6步
6. 服務器返回HTML響應給瀏覽器
7. 瀏覽器解析HTML
8. 對HTML頁面引用的全部資源包括js，css，圖片等等，瀏覽器都發送GET請求，又重複上面的過程

• 優化：減小加載須要創建鏈接的次數，啓用http1.1默認開啓的keep-alive長鏈接，短鏈接就是每次請求都要從新創建TCP鏈接，請求完成斷開TCP鏈接，長鏈接同一個客戶端socket向同一socket的後續請求都複用同一個TCP鏈接。

頁面加載的性能優化

1. 雖然長鏈接可使一個TCP鏈接請求多個資源，可是咱們請求的資源每每是有關聯的，好比要先請求完1.css 再請求1.js

2. 瀏覽器通常會創建多個TCP鏈接，並行請求資源，從而加快總體的速度，可是並行請求的數量是有限制的

針對以上兩點，咱們仍是須要去作一些優化。

1. 減小HTTP請求的次數，因此就有了代碼合併，雪碧圖，將圖片轉爲base64寫入其餘文件

2. 使用HTTP 2，提供了多路複用的功能，全部資源均可以經過一個TCP鏈接不阻塞的並行傳輸，就不須要再作減小HTTP請求次數的優化了。

3. 減小請求資源的大小：開啓Gzip能夠大幅減小資源體積，分割代碼並啓用路由（組件）懶加載，優化首屏加載的性能，使用合理的圖片大小和格式好比說谷歌開發的圖片格式WebP，或者直接用字體圖標代替圖片，字體圖標不只體積小，並且能夠任意變化大小不會模糊，還能夠任意變化顏色，使用很是靈活

4. 緩存，不須要接受數據的傳輸，直接使用瀏覽器的本地緩存，分爲兩種：強緩存和協商緩存，通常是由上一次請求服務器返回的響應頭控制。

   • 強緩存：不會向服務器發送請求，Cache-control或者Expires判斷，若是命中，就返回狀態碼200；
   • 若是不命中則是判斷是否協商緩存：向服務器發送驗證請求，若是請求頭有If-Modified-Since，服務器返回Last-Modified，若是兩個相同則返回狀態碼304；若是發送的請求頭有If-None-Match，服務器返回ETag，比較二者，若是相同則返回狀態碼304

須要注意的是強緩存則不會與服務器有任何交互，因此服務器更新了資源，瀏覽器也沒法得知，若是每次請求都使用協商緩存，每次都要向服務器發送驗證請求，又多作了無用功，因此咱們應該儘量的使用強緩存，可是在更新版本以後讓緩存失效，因此在更新版本的時候直接修改資源文件名就能夠實現了，而後webpack可讓咱們在打包的時候自動給文件名加上哈希值。

頁面渲染過程

1. 解析HTML，生成DOM樹
2. 解析CSS，生成CSSOM樹
3. 將DOM樹和CSSOM樹合成渲染樹，肯定每一個元素運用哪一個CSS規則
4. 根據渲染樹，進行頁面的佈局，計算每一個節點的大小和位置
5. 在頁面上繪製各個節點

頁面渲染的性能優化

問題：

1. css是阻塞渲染的資源，直到CSSOM構建完畢，不會渲染任何已經處理的內容
2. 在HTML的解析過程當中若是遇到scirpt標籤，會中止DOM樹的構建，知道執行完畢，但仍會識別後面的資源並進行預加載，JavaScript能夠查詢和修改CSSOM和DOM
3. 迴流還有重繪致使渲染樹從新生成
   • 迴流會從新計算佈局，一般是由元素的結構，增刪，位置，尺寸變化引發的；還有在js中讀取元素的offset，client，getCom putedStyle也會引發，由CPU處理
   • 重繪：元素的視覺表現變化會引發，好比顏色，背景的改變，由GPU處理
   • 若是迴流，則必定會引發重繪，而且CPU的處理效率不如GPU，因此更注重減小回流

針對以上問題能夠作的優化：

dom：

• 減小dom元素的數量，下降DOM的深度，減小生成DOM樹和渲染樹的構建成本，儘可能避免塞進去div元素只爲了實現佈局，能夠用僞元素的就用僞元素

js：

• 將js放在body底部
• 減小以及合併DOM操做，使用DocumentFragment進行DOM的離線更新

css：

• 放在head中，避免html渲染完成後，又從新結合CSSOM樹，引發頁面閃爍
• 下降css的層級和選擇器的複雜度
• 使用更高性能的css樣式，好比用flex佈局代替float佈局
• 合理使用脫離文檔流的樣式，好比absolute，fiexd，減小引起迴流
• 優先使用transform，opacity等屬性來實現動畫，能夠跳過佈局和繪製的過程，計算樣式以後直接進行渲染層合併