零、什么是DOCTYPE及其作用？
- 1、DTD(document type definition)：文檔類型定義，是一系列的語法規則，用來定義XML或(X)HTML 的文件類型。瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式。
通俗易懂的說就是，DTD告訴瀏覽器我是什么文檔類型，瀏覽器根據這來判斷用什么解析和渲染它。
- 2、DOCTYPE是用來申明文檔類型和DTD規范的，一個主要用途便是文件的合法性驗證。如果文件代碼不合法，那么瀏覽器解析時便會出一些差錯。
通俗易懂的解釋就是，DOCTYPE通知瀏覽器當前文檔包含的是哪個DTD，即何種文檔類型。
3、HTML 5 的DOCTYPE寫法：
<!DOCTYPE >4、HTML 4.0.1有兩種DOCTYPE寫法，一種嚴格模式(strict)，一種傳統模式(Transitional)。
嚴格模式(Strict)：該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素，如font，center，big等
傳統模式(Tranditional)：該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素，如font，center，big等
一、瀏覽器的渲染過程
幾個概念：
DOM Tree：瀏覽器將HTML解析成樹形的數據結構。
CSS Rule Tree：瀏覽器將CSS解析成樹形的數據結構。
Render Tree: DOM和CSSOM合并后生成Render Tree。
Layout: 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系，從而去計算出每個節點在屏幕中的位置。
Painting: 按照算出來的規則，通過顯卡，把內容畫到屏幕上。
渲染過程：
(1) 瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。
(2) 將CSS解析成 CSS Rule Tree 。
(3) 根據DOM樹和CSSOM來構造 Render Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
(4) 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。下一步操作稱之為Layout，顧名思義就是計算出每個節點在屏幕中的位置。
(5) 再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個節點。
二、Reflow 重排
1、定義
當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就是重排。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
2、怎么觸發Reflow
任何頁面布局和幾何屬性的改變都會觸發重排，比如：
1、頁面渲染初始化；(無法避免)
2、添加或刪除可見的DOM元素；
3、元素位置的改變，或者使用動畫；（position、left、right等）
4、元素尺寸的改變——大小，外邊距，邊框（margin、padding和margin）；
5、瀏覽器窗口尺寸的變化（resize事件發生時）；
6、填充內容的改變，比如文本的改變或圖片大小改變而引起的計算值寬度和高度的改變；（font-size、font-weight等）
7、讀取某些元素屬性：（offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )
三、Repaint 重繪
1、定義
當盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來之后，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內容呈現在頁面上。
重繪是指一個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。
2、怎么觸發Repaint
改變元素外觀屬性。如：color，background-color等
注意：重排必定會引發重繪，但重繪不一定會引發重排。
四、怎么避免重排和重繪
重排和重繪都會影響網頁加載性能。應該盡量避免重排和重繪，特別是重排，常見做法如下：
1、不要一條一條地修改 DOM 的樣式，而是通過新增一個類名(classname)，把樣式寫在這個類名上，去改變元素樣式。
2、把 DOM ”離線”后修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然后你修改100次，然后再把它顯示出來
3、盡量不要使用table布局，因為table中某個元素旦觸發了reflow，那么整個table的元素都會觸發reflow。那么在不得已使用table的場合，可以設置
table-layout:auto;或者是table-layout:fixed這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍4、為動畫的元素使用絕對定位 absolute / fixed
