什么是DOCTYPE及其作用
- DTD(文檔類型定義)是一系列的語法規(guī)則，用來定義XML或是HTML的文件類型。瀏覽器回根據(jù)它來判斷文檔的類型，決定用何種協(xié)議來解析，以及切換瀏覽器的模式。
- DOCTYPE就是用來聲明文檔類型和DTD規(guī)范的。
- 主要的用途是驗證文件的合法性，如果文件不合法那么瀏覽器解析時變回出錯。（人話：告訴瀏覽器當(dāng)前的文檔包含的是哪個文檔類型）
瀏覽器渲染過程
瀏覽器的渲染過程圖
渲染過程
- HTML解釋器和CSS解釋器分別解析文檔,HTML生成DOM樹,CSS生成style規(guī)則
- 兩者合成串聯(lián)形成渲染樹,包括各個DOM的顏色
- 通過layout精確的計算到得到這些DOM要顯示的位置
- Painting瀏覽器開始畫圖
- Display瀏覽器顯示出要顯示的網(wǎng)頁
重排 Reflow
1. 定義
DOM結(jié)構(gòu)中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據(jù)各種樣式計算結(jié)果將元素放到它該出現(xiàn)的地方。這個過程叫做reflow
2. 觸發(fā)方式
- 增加、刪除、修改DOM節(jié)點(diǎn)的時候，會導(dǎo)致Reflow或者Repaint（重繪）
- 移動DOM的位置，或者是觸發(fā)動畫的時候
- 修改CSS樣式的時候
- 當(dāng)改變?yōu)g覽器窗口大小的時候，或者是滾動的時候
- 修改網(wǎng)頁的默認(rèn)字體
重繪 Repaint
1. 定義
當(dāng)各種盒子的位置、大小及其其他的屬性，例如顏色、字體大小等都確定下來后，瀏覽器于是把這些元素按照擱置的特性繪制了一遍，于是頁面內(nèi)容出現(xiàn)了，這個過程叫做repaint
2. 觸發(fā)方式
- DOM改動
- CSS改動
