一.加載
瀏覽器的五個常駐線程：
瀏覽器 GUI 渲染線程
javascript 引擎線程
瀏覽器定時器觸發(fā)線程( setTimeout,setInterval )
瀏覽器事件觸發(fā)線程
瀏覽器 http 異步請求
當(dāng)js引擎線程（第二個）進(jìn)行時阁吝，會掛起其他一切線程，這個時候3哈街、4揣苏、5這三類線程也會產(chǎn)生不同的異步事件悯嗓，由于 javascript引擎線程為單線程，所以代碼都是先壓到隊列舒岸，采用先進(jìn)先出的方式運行绅作，事件處理函數(shù)，timer函數(shù)也會壓在隊列中蛾派，不斷的從隊頭取出事件，這就叫：javascript-event-loop。簡單點說應(yīng)該是當(dāng)在進(jìn)行第二線程的時候洪乍，1眯杏，3，4壳澳，5都會掛起岂贩，比如這時候觸發(fā)click事件，即使先前JS已經(jīng)加載完成巷波，click事件會壓在隊列里萎津，這里也要先完成第二線程才會執(zhí)行click事件。
加載順序：http://www.cnblogs.com/web-easy/p/5067680.html
二抹镊、渲染
渲染引擎的職責(zé)锉屈，就是負(fù)責(zé)把從服務(wù)器返回HTML，XML或者images等資源渲染并展現(xiàn)給用戶垮耳。
常用的渲染引擎有：webkit ( chrome, safari, opera ) 和 gecko ( firefox )颈渊。
基本的渲染過程：
1.渲染引擎首先會解析 HTML 文檔，轉(zhuǎn)化為 DOM 樹终佛。
2.解析 CSS 的樣式俊嗽，渲染出另外一棵用于渲染 DOM 樹的 render-tree ，render-tree 中包含有 css 中的顏色铃彰，屬性等绍豁。
3.對 render-tree 中的每個節(jié)點進(jìn)行布局，確定其在屏幕上的位置牙捉。
4.遍歷渲染樹妹田，將每一個節(jié)點繪制出來。
webkit 的渲染流程：
gecko 的渲染流程：
通過上圖可以看出鹃共，webkit 與 gecko 最大的區(qū)別就是渲染樣式的時間鬼佣。
webkit 中，解析 HTML 與 CSS 樣式是同時發(fā)生的霜浴。
而 gecko 中 HTML 解析出 content-sink ( DOM樹搭建前的 pre-model ) 之后晶衷，按照 pre-model 來解析樣式。
樣式計算優(yōu)先級：
瀏覽器默認(rèn)樣式
用戶個性化瀏覽器設(shè)置
HTML 開發(fā)者定義的一般樣式
開發(fā)者定義的 !important 樣式
用戶個性瀏覽器設(shè)置的 !important 樣式
更詳細(xì)的：
通用選擇器（*）>元素(類型)選擇器>類選擇器>屬性選擇器>偽類>ID 選擇器>內(nèi)聯(lián)樣式
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
舉例說明
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
上面確定了renderer的樣式規(guī)則后阴孟，然后就是重要的顯示因素布局了晌纫。當(dāng)renderer構(gòu)造出來并添加到render樹上之后，它并沒有位置跟大小信息永丝，為它確定這些信息的過程锹漱，我們就稱之為布局。HTML采用了一種流式布局的布局模型慕嚷，從上到下哥牍，從左到右順序布局毕泌，布局的起點是從render樹的根節(jié)點開始的，對應(yīng)dom樹的document節(jié)點嗅辣，其初始位置為0,0,詳細(xì)的布局過程為： 每個renderer的寬度由父節(jié)點的renderer確定撼泛。 父節(jié)點遍歷子節(jié)點，確定子節(jié)點的位置（x,y)澡谭，調(diào)用子節(jié)點的layout方法確定其高度愿题。 父節(jié)點根據(jù)子節(jié)點的height,margin,padding確定自身的自身的高度。
為了避免因為局部小范圍的DOM修改或者樣式改變引起整個頁面整體的布局重新構(gòu)造蛙奖，瀏覽器采用了一種dirty bit system的技術(shù)潘酗，使其盡可能的只改變元素本身或者包含的子元素的布局。當(dāng)然有些情況無可避免的要重新構(gòu)造整個頁面的布局雁仲，如適合于整體的樣式的改變影響了所有renderer仔夺，如body{font-size:111px} 字體大小發(fā)生了改變，還有一種情況就是瀏覽器窗口進(jìn)行了調(diào)整伯顶，resize囚灼。
參考：
http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
