談談頁面渲染機制
1.瞭解doctype以及它的作用
標準的html頁面頭部第一行都有doctype的宣告，並且你會發現並不是所有的doctype都一致,它是用來幹嘛的，又有哪幾種呢？
doctype是什麼：
DTD:(document type definition,文件型別定義) 是一系列的語法規則，用來定義xml或者(x)HTML的檔案型別。就是告訴瀏覽器當前文件是什麼型別的，需要用什麼引擎來解析它。
DOCTYPE是document type(文件型別)的簡寫，用來說明你用的XHTML或者HTML是什麼版本。瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展現出來。
常見的DOCTYPE型別：
1.html5
<!DOCTYPE html>
1.用於XHTML 4.0 的嚴格型 （該dtd包含所有的HTML元素和屬性，但不包括展示型的和棄用性的元素比如font)
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">/用於XHTML 4.0 的傳統型 （該dtd包含所有的HTML元素和屬性，包括展示型的和棄用性的元素比如font)
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd">HTML5因為不基於 SGML，因此不需要對DTD進行引用;但是需要doctype來規範瀏覽器的行為(讓瀏覽器按照它們應該的方式來執行)。 而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
2.瀏覽器渲染過程
首先放一張瀏覽器渲染流程圖（網路上找的）
當瀏覽器拿到 HTML 和css，通過HTML解析器和css解析器分別生成DOM tree 和 CSSom兩者結合形成renderTree ,此時的renderTree還不知道在哪個位置放置節點，是通過瀏覽器的Layout告訴它具體的位置樣式，最後繪製出我們最終看到的頁面效果。這個就是瀏覽渲染的基本過程。
說到渲染，有兩個概念需要提及，重繪和重排。那什麼是重繪和重排，什麼操作會觸發這個兩個過程呢？
重排Reflow：DOM結構中的各個元素都有自己的盒子模型，瀏覽器根據各種樣式計算得出結果將元素放到具體的位置上，這個過程我們稱之為reflow
哪些動作觸發reflow
- 增刪改DOM節點
- 修改css樣式
- 移動DOM節點
- 改變視窗大小，改變文字大小
- 內容的改變，
- 設定offsetHeight,offsetWidth
重繪Repaint:瀏覽器根據盒子具體的位置，大小和顏色等屬性，將各元素按照各自的特性都繪製一遍。這個過程為重繪。如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引起瀏覽器 repaint
哪些動作觸發repaint: css和dom的改動都會引起repaint
瀏覽器在渲染過程中的reflow和repaint會大大影響web的效能,因此我們要避免reflow和減少repaint,如減少上面的觸發條件;在為dom新增節點的時候，建立一個變數儲存所有的子節點，當所有操作完畢之後 再一次性新增到dom上來。
以上。
寫文件真比想象當中要困難，望繼續堅持。