渲染樹-佈局和繪製

5-渲染樹-佈局和繪製

renderer 節點剛剛建立，插入 render tree 中並無 position 和 size 信息，而 layout 階段就是計算元素幾何信息的地方。由於瀏覽器採用的是流式佈局，計算元素的幾何信息是一次性的，並且後面元素幾乎不影響前面元素的幾何信息，除 table 元素例外。

每個 renderer 都要一個 layout 方法，而整個過程是從 render 樹的底層節點開始，遞歸的計算每個節點的幾何信息，root renderer 的位置是瀏覽器窗口的左上角，而對應的大小就是瀏覽器窗口的大小。

佈局也有不一樣的種類：全局佈局和增量佈局。

所有的樣式改變，影響到全部的 renderer （如 font-size）或是調整了窗口的大小（resize），會觸發全局佈局。而若是僅僅是 renderer 的位置改變的時候，整個解析器並不會再次渲染 renderer 大小而是去緩存中取。

而有 renderer 標記爲 dirty 時，會觸發增量佈局，該過程是異步的。標記 dirty 是做用就是標記自身，告訴解析器說：「我須要從新layout了。」

計算完對應的佈局以後，開始就是 painting 階段，一樣遍歷 render tree，讓每個節點觸發自身的 paint 函數，而後使用 UI infrastructure component 去繪製整個頁面。每個元素繪製的順序是背景顏色、背景圖片、邊框、children、outline。而咱們知道通常在後續的解析腳本中，可能會觸發重繪，而繪製遵行的原則是：當樣式發生變化時，瀏覽器會盡量作出最小的響應。

繪製的過程有所講究的：很早以前（chrome最開始的版本），繪製過程是將 render tree 的信息轉化爲窗口上的每個像素點，這個過程叫作光柵化（rasterizing），其實叫作柵格化比較好理解。但這樣僅僅繪製的是當前窗口的圖像，當窗口移動的時候，纔會將還沒有繪製的部分進行刪格化。

但現今瀏覽器更多采用的是 複合層（compositing）方式，而改方式其實就是將一個頁面分爲不一樣的 layer，順便刪格化這些 layer，而展現方式變爲將不一樣的 layer 合併爲一個新的畫面，這樣呈現給 web 動畫創造了良好的基礎。

經過以上這麼多的流程，最後就是讓你我看到了，設計師和工程師們辛苦的傑做咯~

下一篇文章

參考文獻