一、什麼是DOCTYPE
<!DOCTYPE HTML>這個都見過，放在html文檔的最前面。
那DOCTYPE是起到什麼作用呢？
DOCTYPE是用來聲明文檔類型的DTD規範的。一個主要用途就是文件的合法性驗證，如果不合法，那麼瀏覽器解析時就會出錯。
那DTD(文檔類型定義)是一系列的語法規則，用來定義XML或HTML的文件類型。瀏覽器會用它來判斷文檔類型，決定使用何種協議解析，以及切換瀏覽器模式。
最常使用的是HTML5的DOCTYPE.就是文章開頭標籤裏的內容。
另外還有HTML4.0.1版本的聲明。
這兩種聲明具體怎麼寫不重要，主要說一下區別：
嚴格模式：該DTD包含所有HTML元素和屬性，但不包含展示性的和已棄用的元素(比如font)
傳統模式：該模式下會包含展示性的和已棄用的元素。
二、瀏覽器的渲染過程
插張圖
從接收到html和css文件說起。
1.會將HTML解析成DOM Tree，CSS樣式解析成Rule Tree
2.1中的DOM Tree 和 CSS Rule Tree 合併以後變成Render Tree。
3.結合Layout，這時候瀏覽器已經知道各個節點的css定義，從而在瀏覽器中計算出他們所在的位置
4.painting，就是瀏覽器開始繪製。
5.display，最終呈現在用戶面前。
三、重排 Reflow
什麼是Reflow？
定義：DOM結構中的每個元素都有自己的盒模型，這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置，這個過程叫reflow。
什麼情況下會觸發reflow？
*當增加，刪除，修改DOM節點時，會導致reflow或repaint。
*當移動DOM的位置時，比如說動畫效果。會導致reflow
*當修改CSS樣式的時候
*當Resize窗口(就是調整窗口大小)的時候，或是滾動的時候。
*當修改網頁的默認字體的時候。
四、重繪Repaint
定義：當各種盒子的位置，大小以及其他屬性例如顏色，字體大小都確定下來後，瀏覽器於是把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程叫repaint。
什麼情況下會觸發repaint？
就是隻要頁面有一點的變動，都是觸發了repaint。
五、如何減少reflow或repaint？
優化頁面性能，這一點很重要，就是減少reflow和儘量避免repaint的次數。
有幾個方面的方法：
1.不一條條的修改DOM的樣式，而是採用添加class的方式一次性的修改。舉個例子
Element.style.width = 100 + 'px';
Element.style.height = 100 + 'px';
這樣寫會增加reflow的repaint的次數。
建議這樣
Element.className += 'otherClass';
2.對要進行修改操作的元素進行離線處理，處理完後一起更新。
比如要對某一個元素進行修改，可以先將其display屬性設置爲none，因爲隱藏的元素不會再render Tree中， 修改他不會觸發reflow或repaint。修改完了之後，再將其display改回來。這樣子，就只會觸發兩次reflow和 repaint。
3.不要把 DOM 節點的屬性值放在一個循環裏當成循環裏的變量。不然這會導致大量地讀寫這個結點的屬性。
4.儘可能的修改層級比較低的 DOM節點。
這個很好理解，就是如果修改的DOM借點層級越高，可能其牽連的子節點也越多。比如，修改了一個祖父元 素的寬度1，那麼相應的子孫元素，兄弟元素和兄弟元素的子孫元素也會發生reflow和repaint。
5.可以將需要多次reflow的元素的定位position設置爲absolute或fixed。使之脫離文檔流，這樣就不會影響到 其他節點的layout。這樣就會大大降低reflow和repaint的次數。
6.不要用table佈局。