瀏覽器底層渲染機制和CRP性能節點優化
撰寫一個頁面所需的技術堆疊
HTML$CSS[less/sass/style…]
按照w3c規范去撰寫代碼，瀏覽器本身也是按照w3c規范去編譯決議我們的代碼, 最后渲染出我們想要的效果!!
javascript[ES6+/XMLHttpRequest/vue/react…]
開發者按照ECMAScript-262規范去開發代碼，瀏覽器也按照這個規范決議
瀏覽器基于自己的內核[渲染引擎 webkit->v8引擎]，自上而下，自左而右(有特殊情況)渲染和決議代碼，最后在瀏覽器中繪制出對應的頁面和效果！！
###渲染程序中遇到的幾種情況
渲染程序中：[基于GUI執行緒渲染] 自上而下去渲染
遇到 <link href='...'>，瀏覽器會單獨分配一個執行緒【http網路執行緒】去服務器獲取資源檔案資訊，此時GUI繼續向下渲染–>是異步操作
+但是不同瀏覽器可以允許同時并發的HTTP請求，有次數限制 ，一般5~7次
遇到<style>...</style>無需分配執行緒去獲取檔案，只需要等待DOM TREE生成后，其他樣式資源也獲取后，按照順序依次渲染即可
遇到<style>@improt'xxx.css';</style>會阻礙GUI的渲染，需要等待服務器回傳對應樣式資源后，GUI才可以繼續向下渲染
遇到<img src='xxx.png'>也是分配新的執行緒去獲取圖片檔案，GUI繼續向下渲染–>是異步操作
遇到<srcipt src='xxx/js>,也會阻礙GUI的渲染，雖然分配了一個新的HTTP執行緒去服務器獲取JS檔案，但是檔案沒有獲取到之前 GUI是不進行渲染的的 !只有拿到JS 代碼，并且把它執行完，GUI才會渲染 ---->是同步操作
+把srcipt 放在head標簽中，經常獲取不到DOM元素的
解決方法：
@1<srcipt>把放在boby最底部，這樣是等待DOM TREE生成之后才執行的，此時可以獲取DOM 元素的[推薦]
@2基于window.onload(所有資源加載完成）或者DOMContentLoaded（DOM TREE生成）事件去監聽
@3如果是匯入外部的JS資源，還可以基于async或者defer屬性做延遲異步處理
async ：分配新的執行緒去獲取JS，此時GUI繼續向下渲染[改為異步操作]；當JS 資源獲取到后，立即停止GUI渲染，先把獲取的js執行 執行完成后，在繼續執行GUI渲染！
defer：分配新的執行緒去獲取js此時GUI繼續向下渲染，等待GUI渲染完成之后，而且所有設定defer的資源后獲取到； 按照之前多的匯入的先后順序依次執行代碼[和類似]
注：如果匯入的JS資源不存在依賴關系， async可以使用；但凡需要依賴關系則使用defer
**
瀏覽器渲染機制
**
1.生成DOM TREE
GUI渲染中， 遇到<link>,<img>...等，都分配HTTP執行緒去獲取資源，GUI 繼續渲染；所以在資源獲取到之前，首先把當前頁面中的HTML結構規劃好，規劃好的 HTML結構就是’DOM TREE’
2.拿到CSS進行渲染，生成CSSDOM TREE
DOM TREE生成后，等待請求的樣式資源獲取到,GUI渲染執行緒開始渲染和決議CSS代碼[重點：等待所有樣式資源都獲取到之后，按照之前的匯入順序依次渲染]
3.生成RENDER TREE
把生成的DOM TREE和CSSDOM TREE合并在一起生成RENDER TREE[渲染樹中包含了每個節點的樣式以及節點之間的嵌套關系]
4.瀏覽器按照RENDER TREE 進行渲染
4.1 Layout布局排列
根據當前瀏覽器大小，計算出每一個節點在視口中事物位置等
4.2 分層
把每個節點根據樣式，放在指定的檔案節流中[創造新檔案的樣式：float,position,transform…]
并且規劃出每一層具體的繪制步驟和要繪制的樣式
4.3.Painting繪制
按照之前規劃好的一層層進行繪制，最后呈現出頁面的效果
優化渲染事件
根據瀏覽器渲染的機制，我們在每一個核心步驟中去做一些優化，以此來加快頁面渲染的速度，縮短頁面首次打開的時間[或者是減少頁面白屏的等待的時間]=>CRP[關鍵渲染路徑] 優化方案
優化首次渲染事件
《DOM TREE優化》
{1：css代碼較少的情況下使用“內嵌式”樣式[尤其移動端]；代碼較多的情況下，使“外鏈式”樣式[盡可能把樣式檔案合并壓縮為1]個，非必要，絕對不使用‘@import匯入式’樣式，因為他會阻礙GUI 的渲染
2：JS 代碼都放在頁面的底部，[可以設定async|defer]
3: 圖片一定要做‘懶加載’；第一次渲染頁面，不去獲取真實的圖片資源，加快頁面的渲染；第一次渲染完，在把可視視窗中出現的圖片做懶加載！}====>目的是第一次打開頁面能夠快速展示
4：減少HTML的層級嵌套，一定使用語意化標簽…這樣可以加快DOM TREE的構建
《CSSOM TREE優化》
5:CSS選擇器結構不要太深【擴展：雅虎CSS優化的36條建議】…加快CSSOM TREE的構建
6:前端骨架屏：
+在頁面真實的內容渲染之前，先給一個loading的效果（一般都是用灰白框框占位）[提高人性化體驗]
+開始最好只渲染首屏內容[可以交給服務器來渲染】
+后期向下滑動，在渲染其他螢屏的內容
+…
首次渲染完成后，頁面運行的時候性能優化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297594.html
標籤：其他
上一篇：利用js實作輪播圖（上一張，下一張，選取第幾張，影片等）
下一篇：前端基礎必知必會