渲染樹render tree

時間 2019-12-18

標籤渲染 rendertree 简体版

原文原文鏈接

CSSOM樹和DOM樹鏈接在一塊兒造成一個render tree，渲染樹用來計算可見元素的佈局而且做爲將像素渲染到屏幕上的過程的輸入。html

DOM樹和CSSOM樹鏈接在一塊兒造成render tree .
render tree只包含了用於渲染頁面的節點
佈局計算了每個對象的準確的位置以及大小
繪畫是最後一步，繪畫要求利用render tree來將像素顯示到屏幕上

第一步是結合DOM樹和CSSOM樹造成「render tree」，渲染樹用來描述全部可見的DOM內容，而且將CSSOM樣式信息附加到節點上。web

爲了造成渲染樹，瀏覽器大體作的事情有:瀏覽器

從DOM樹根節點開始，遍歷每個可見的節點
- 一些節點是徹底不可見的（好比 script標籤，meta標籤等），這些節點會被忽略，由於他們不會影響渲染的輸出
- 一些節點是經過CSS樣式隱藏了，這些節點一樣被忽略——例如上例中的span節點在render tree中被忽略，由於span樣式是display:none;
對每個可見的節點，找到合適的匹配的CSSOM規則，而且應用樣式
顯示可見節點（節點包括內容和被計算的樣式）

記住

記住「visibility:hidden」和「display：none」之間的不一樣，「visibility:hidden」將元素設置爲不可見，可是一樣在佈局上佔領必定空間（例如，它會被渲染成爲空盒子），可是「display:none」的元素是將節點從整個render tree中移除，因此不是佈局中的一部分。

最後輸出的是一個render包括了屏幕上可見內容的樣式信息和內容信息。工具

咱們知道了哪些元素應該被顯示以及元素的樣式，可是咱們尚未計算元素在設備中的確切的位置和大小——這是「佈局」階段，一樣也被叫作「reflow」。佈局

 
   <html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html> 
  