什麼是DOCTYPE及作用
DOCTYPE是用來聲明文檔類型和DTD規範的，一個主要的用途便是驗證文件的合法性，如果文件代碼不合法，那麼瀏覽器解析時就會出現一些差錯。
DTD（document type definition ,文檔類型定義）是一系列的語法規則，用來定義XML或（X）HTML的文件類型。瀏覽器會使用它來判斷文檔的類型，決定使用何種協議來解析以及切換瀏覽器的模式。
常見的DOCTYPE：
HTML5 :
<!DOCTYPE html>
HTML 4.01 Strict（嚴格模式） 該DTD包含所有HTML元素的屬性，但不包括展示性的和棄用的元素如font
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transtitional(寬鬆模式)該DTD包含所有的HTML元素和屬性，包括棄用和展示性的元素。
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
瀏覽器渲染過程![瀏覽器渲染過程]()
如上圖所示，可以分爲以下步驟來講解瀏覽器的渲染過程：
1. 瀏覽器將獲取的HTML文檔解析成DOM樹；
2. 解析css，生成CSSOM規則樹；
3. 將DOM樹與CSSOM規則樹合併在一起生成渲染樹。
4. 遍歷渲染樹開始佈局，通過Layout計算出每個節點的大小，顏色等信息。
5. 開始將渲染樹的每個節點繪製到屏幕。
什麼是重排（Reflow）
- 定義
DOM結構中的各個元素都有自己的盒子，這些都是需要瀏覽器根據各種樣式來計算並根據計算結果將元素放在它該出現的位置，這個過程稱爲reflow。簡單的講就是引起DOM樹重新計算的行爲。 - 什麼情況下會觸發Reflow
(1) 增加、刪除、修改DOM節點時，會導致Reflow或Repaint
(2) 移動DOM的位置，或是搞個動畫的時候
(3）修改CSS樣式的時候
(4）Resize窗口（移動端沒有這個問題）發生改變或者滾動的時候
(5）修改網頁的默認字體
和 重繪（Repaint）?
- 定義
當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱之爲repaint。瀏覽器在第一次加載的時候會觸發重排和重繪。 - 什麼情況下會觸發重繪？
（1）DOM改動
（2）CSS改動
如何減少reflow/repaint
- 避免對DOM進行頻繁的操作。
- 集中修改樣式，比如儘量通過修改className來修改樣式，儘可能少的修改元素style上的屬性等
- 設置元素的position的值爲absolute或fixed
在元素的postion的值爲static或relative的時候，如果需要對某個元素進行操作，就會使瀏覽器重新渲染整個頁面。但position的值爲absolute和fixed的時候，元素脫離文檔流，瀏覽器重新渲染的時候也只會渲染該元素及它裏面的子元素，縮短了瀏覽器渲染的時間。