《瀏覽器渲染原理及流程》學習筆記

瀏覽器完整地呈現一張頁面在咱們眼簾以前，都作了啥工做？或者說，其步驟爲什麼？

答案是構建各類樹。所謂的樹，那就是有兄弟、子孫等節點了。一棵樹構造出來，各類元素的前後順序就都有了。

有哪些樹呢？這些樹：

DOM Tree：瀏覽器將HTML解析成樹形的數據結構。

CSS Rule Tree：瀏覽器將CSS解析成樹形的數據結構。

Render Tree: DOM和CSSOM合併後生成Render Tree。

layout: 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係，從而去計算出每一個節點在屏幕中的位置。

painting: 按照算出來的規則，經過顯卡，把內容畫到屏幕上。

期間會有一些二月逆流：reflow（迴流）和 repaint（重繪）。

注意：上述這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

有學習必有輸出，《瀏覽器渲染原理及流程》是高手的學習筆記，而後我如今拜讀了他的學習筆記後又寫了這篇學習筆記。

參考資料：
瀏覽器渲染原理及流程