1. 什麼是doctype及其作用
dtd(document type definition，文件型別定義)是一系列的語法規則，用來定義xml或(x)html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析及切換瀏覽器模式
doctype是用來宣告文件型別和dtd規範的，乙個主要的用途便是檔案的合法性驗證。如果檔案**不合法，那麼瀏覽器解析便會出現一些差錯。
html5
html4.01 strict 該dtd包含所有的html元素和屬性，但不包括展示性的和棄用的元素（比如font）
doctype html public "-//w3c//dtd html 4.01//en"html4.01 transitional 該dtd包含所有的html元素和屬性，包括展示性的和棄用的元素（比如font）"">
doctype html public "-//w3c//dtd html 4.01 transitional//en"2.瀏覽器渲染過程"">
3. 重排reflow
定義：dom結構中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放在它該出現的位置，這個過程稱之為reflow
觸發reflow:當你增加、刪除、修改dom節點的時候，會導致reflow或repaint
當你移動dom的位置，或者加個動畫的時候
當你修改css樣式的時候
當你resize視窗的時候（移動端沒有這個問題），或是滾動的時候
當你修改網頁預設字型的時候
4. 重繪repaint
定義：當各種盒子的位置、大小以及其他屬性，例如顏色、字型大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱為repaint
觸發repaint:dom改動 css改動
儘量減少repaint和reflow優化頁面效能：
不要把 dom 節點的屬性值放在乙個迴圈裡當成迴圈裡的變數。不然這會導致大量地讀寫這個結點的屬性。
盡可能的修改層級比較低的 dom節點。當然，改變層級比較底的 dom節點有可能會造成大面積的 reflow，但是也可能影響範圍很小。
為動畫的 html 元件使用 fixed 或 absoult 的 position，那麼修改他們的 css 是會大大減小 reflow 。
千萬不要使用 table 布局。因為可能很小的乙個小改動會造成整個 table 的重新布局。
瀏覽器渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...
瀏覽器的渲染機制
節選自 1 dom document object model，瀏覽器將html解析成樹形的資料結構，簡稱dom。2 cssom css object model，瀏覽器將css 解析成樹形的資料結構。3 dom 和 cssom 都是以bytes characters tokens nodes ob...
瀏覽器的渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...