瀏覽器渲染機制
1. 什麽是DOCTYPE及其作用
DTD(document type definition，文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML的文件類型。瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析及切換瀏覽器模式
DOCTYPE是用來聲明文檔類型和DTD規範的，一個主要的用途便是文件的合法性驗證。如果文件代碼不合法，那麽瀏覽器解析便會出現一些差錯。
HTML5 <!DOCTYPE html>
HTML4.01 Strict 該DTD包含所有的HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional 該DTD包含所有的HTML元素和屬性，包括展示性的和棄用的元素（比如font）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.瀏覽器渲染過程
3. 重排Reflow
定義：DOM結構中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放在它該出現的位置，這個過程稱之為reflow
觸發Reflow: 當你增加、刪除、修改DOM節點的時候，會導致Reflow或Repaint
當你移動DOM的位置，或者加個動畫的時候
當你修改css樣式的時候
當你Resize窗口的時候（移動端沒有這個問題），或是滾動的時候
當你修改網頁默認字體的時候
4. 重繪Repaint
定義：當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪制了一遍，於是頁面的內容出現了，這個過程稱為repaint
觸發Repaint:DOM改動 CSS改動
盡量減少repaint和reflow優化頁面性能：
把 DOM 離線後修改。如：
先把 DOM 給 display:none (有一次 repaint)，然後你想怎麽改就怎麽改。比如修改 100 次，然後再把他顯示出來。
clone 一個 DOM 節點到內存裏，然後想怎麽改就怎麽改，改完後，和在線的那個的交換一下。
不要把 DOM 節點的屬性值放在一個循環裏當成循環裏的變量。不然這會導致大量地讀寫這個結點的屬性。
盡可能的修改層級比較低的 DOM節點。當然，改變層級比較底的 DOM節點有可能會造成大面積的 reflow，但是也可能影響範圍很小。
為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那麽修改他們的 CSS 是會大大減小 reflow 。
千萬不要使用 table 布局。因為可能很小的一個小改動會造成整個 table 的重新布局。
瀏覽器渲染機制