瀏覽器的渲染機制


什麼是DOCTYPE及其作用

  • DTD(文檔類型定義)是一系列的語法規則,用來定義XML或是HTML的文件類型。瀏覽器回根據它來判斷文檔的類型,決定用何種協議來解析,以及切換瀏覽器的模式。
  • DOCTYPE就是用來聲明文檔類型和DTD規範的。

* 主要的用途是驗證文件的合法性,如果文件不合法那麼瀏覽器解析時變回出錯。(人話:告訴瀏覽器當前的文檔包含的是哪個文檔類型)

瀏覽器渲染過程

瀏覽器的渲染過程圖
##### 渲染過程
1. HTML解釋器和CSS解釋器分別解析文檔,HTML生成DOM樹,CSS生成style規則
2. 兩者合成串聯形成渲染樹,包括各個DOM的顏色
3. 通過layout精確的計算到得到這些DOM要顯示的位置
4. Painting瀏覽器開始畫圖
5. Display瀏覽器顯示出要顯示的網頁


重排 Reflow

1. 定義

DOM結構中的各個元素都有自己的盒子(模型),這些都需要瀏覽器根據各種樣式計算結果將元素放到它該出現的地方。這個過程叫做reflow

2. 觸發方式
  • 增加、刪除、修改DOM節點的時候,會導致Reflow或者Repaint(重繪)
  • 移動DOM的位置,或者是觸發動畫的時候
  • 修改CSS樣式的時候
  • 當改變瀏覽器窗口大小的時候,或者是滾動的時候
  • 修改網頁的默認字體

重繪 Repaint

1. 定義

當各種盒子的位置、大小及其其他的屬性,例如顏色、字體大小等都確定下來後,瀏覽器於是把這些元素按照擱置的特性繪製了一遍,於是頁面內容出現了,這個過程叫做repaint

2. 觸發方式
  • DOM改動
  • CSS改動
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章