瀏覽器渲染原理
阿新 • • 發佈：2020-11-23
Request請求階段:
瀏覽器（客戶端） -- DNS解析，TCP三次握手和四次揮手 --> 伺服器端
Response響應階段
伺服器端 -- 網頁原始碼，HTTP狀態碼，304快取，HTTP響應報文 --> 瀏覽器
解析渲染
瀏覽器拿到程式碼後，從記憶體中開闢一塊棧記憶體為程式碼執行提供環境；
同時，分配一個主執行緒去逐行解析程式碼（因此JS是單執行緒的）。
程式碼每一行都存在棧記憶體裡面，每次執行完一行程式碼，該行程式碼都會出棧，即從棧記憶體刪除。
<!DOCTYPE html> //每行執行完出棧 ... <link href="..."> ... <image src="..."> ... <script href="..."> ...
每個<link>,<image>和<script>都會建立一個新的執行緒去執行這些標籤引用的程式碼（script執行JS，單執行緒）。
因此我們說，瀏覽器是多執行緒的但是JavaScript是單執行緒的。
然後，瀏覽器會開闢一個任務佇列（Task Queue）來執行這些執行緒。
第一次自上而下讀取：生成DOM樹
瀏覽器的主執行緒同時繼續從上往下讀取並且執行HTML程式碼，最終生成DOM樹。頁面的內容獲得了。
接著，瀏覽器把Task Queue裡面已經解析完的任務出隊，並把它放入棧記憶體執行。執行完成後，再去Task Queue裡面獲取已解析完的任務...這個過程被稱為事件迴圈（Event Loop） 。
Task Queue裡面的任務分為微任務和巨集任務，微任務優先順序較高。
事件迴圈完成後生成CSSOM。頁面的樣式獲得了。
DOM+CSSOM結合，成為渲染樹（Rendar Tree）。
迴流（Layout）
計算影象在螢幕視窗上的實際具體位置和大小。
重繪（Painting）
根據渲染樹迴流得到的資訊得到節點的絕對畫素並繪製樣式。
顯示（Display）
GPU讀取渲染樹，繪製並且顯示網頁。
知識點的應用：減少HTTP的請求次數和大小以優化網頁效能
1. 通過減少css和js的引入，壓縮圖片或者使用精靈圖來實現資源合併壓縮。
2. 圖片懶載入，即生成DOM樹之後再載入圖片，且頁面滾動到哪裡就載入哪裡。
3. 音視訊走流檔案，即邊用邊載入。