1. DOCTYPE:
DOCTYPE是用來聲明文檔類型和DTD規(guī)范的，一個(gè)主要的用途便是文件的合法性驗(yàn)證。
HTML5聲明方式：
<!DOCTYPE html>
HTML4聲明方式：
HTML4分為Strict（嚴(yán)格模式）和Transitional（寬松模式）
嚴(yán)格模式
包含所有HTML元素和屬性缓艳，但不包含展示性和棄用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
寬松模式
包含所有HTML元素和屬性好啰，包含展示性和棄用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loosse.dtd">
2. 瀏覽器渲染過程：
Webkit渲染引擎工作流程
image
- 解析HTML生成DOM樹文狱。
- 解析CSS生成CSSOM規(guī)則樹斯撮。
- 將DOM樹與CSSOM規(guī)則樹合并在一起生成渲染樹。
- 遍歷渲染樹開始布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置大小信息憨颠。
- 將渲染樹每個(gè)節(jié)點(diǎn)繪制到屏幕。
重排Reflow：
定義：
DOM結(jié)構(gòu)中各個(gè)元素都有自己的盒模型积锅，這些都需要瀏覽器根據(jù)各種樣式來計(jì)算并根據(jù)結(jié)果將元素放到該出現(xiàn)的位置爽彤，這個(gè)過程稱之為reflow
觸發(fā)條件：
- 增加、刪除缚陷、修改DOM節(jié)點(diǎn)時(shí)适篙，會(huì)觸發(fā)Reflow或Repaint。
- 移動(dòng)DOM位置箫爷、動(dòng)畫嚷节。
- 修改CSS樣式聂儒。
- Resize窗口（移動(dòng)端除外）、滾動(dòng)硫痰。
- 修改網(wǎng)頁默認(rèn)字體衩婚。
重繪Repaint：
定義：
當(dāng)各種盒子的位置、大小及其他屬性都確定后碍论，瀏覽器把這些元素按照各自的屬性繪制一遍谅猾，于是頁面出現(xiàn)，這個(gè)過程稱之為repaint
觸發(fā)條件：
- DOM改動(dòng)鳍悠。
- CSS改動(dòng)税娜。
- 只要頁面內(nèi)容顯示有變化則觸發(fā)repaint 。
如何減少repaint頻率：
改變多個(gè)DOM節(jié)點(diǎn)時(shí)使用DocumentFragment文檔片段節(jié)點(diǎn)藏研，將需要改變的多個(gè)節(jié)點(diǎn)全部放到DocumentFragment中一次改變DOM敬矩，這樣只會(huì)觸發(fā)一次repaint，優(yōu)化性能蠢挡。
