加載與渲染
????瀏覽器的主要作用是將用戶輸入的“URL”轉(zhuǎn)變?yōu)榭梢暬瘓D像。按照某文檔的分析豁辉，這其中包含兩個(gè)過(guò)程徽级，其一是網(wǎng)頁(yè)加載過(guò)程餐抢，就是從“URL”到構(gòu)建DOM樹(shù)低匙；其二就是網(wǎng)頁(yè)渲染過(guò)程，從DOM生成可視化圖像欺抗。
????網(wǎng)頁(yè)渲染有一個(gè)特性佃声，通常視圖比屏幕可視化面積大倘要。所以在渲染時(shí)一般加入滾動(dòng)條，就用戶體驗(yàn)來(lái)說(shuō)父晶，垂直方向的滾動(dòng)條效果好過(guò)水平頁(yè)面的滾動(dòng)條效果弄跌。
WebKit的渲染過(guò)程
????根據(jù)數(shù)據(jù)的流向，可以把過(guò)程分為三個(gè)階段埠胖，第一個(gè)階段就是從網(wǎng)頁(yè)的URL到構(gòu)建完DOM樹(shù)直撤，第二個(gè)階段是從DOM樹(shù)到構(gòu)建完WebKit的繪圖上下文蜕着，第三個(gè)階段是從繪圖上下文生成最終的圖像。
第一階段
具體過(guò)程如下：
- 當(dāng)用戶輸入網(wǎng)頁(yè)URL時(shí)蓖乘，WebKit調(diào)用資源加載器加載該URL對(duì)應(yīng)的網(wǎng)頁(yè)嘉抒。
- 加載器依賴網(wǎng)絡(luò)建立連接些侍，發(fā)送請(qǐng)求并接受答復(fù)政模。
- WebKit接受到各種網(wǎng)頁(yè)或者資源的鏈接淋样，其中某些資源通過(guò)同步或者異步獲取。
- 網(wǎng)頁(yè)被交給HTML解釋器解釋為一系列詞語(yǔ)纽什。
- 解釋器根據(jù)詞語(yǔ)構(gòu)建節(jié)點(diǎn)（NODE）芦缰，形成DOM樹(shù)枫慷。
- 如果節(jié)點(diǎn)是JavaScript代碼就調(diào)用JavaScript引擎解釋并執(zhí)行。
- JavaScript代碼可能會(huì)修改DOM樹(shù)的結(jié)構(gòu)笋婿。
- 如果節(jié)點(diǎn)依賴其他資源顿颅，則調(diào)用資源加載器加載，但他們是異步的庇配，不會(huì)阻礙當(dāng)前DOM樹(shù)的繼續(xù)構(gòu)建捞慌；如果是JavaScript資源URL（沒(méi)有標(biāo)志異步方式）啸澡，則需要停止當(dāng)前DOM樹(shù)構(gòu)建氮帐，直到JavaScript資源加載完畢并被JavaScript引擎執(zhí)行后才繼續(xù)DOM樹(shù)構(gòu)建揪漩。
????上述過(guò)程中，網(wǎng)頁(yè)會(huì)發(fā)出“DOMConent”和DOM“onload”事件，分別在DOM樹(shù)構(gòu)建完之后昂勒，以及DOM樹(shù)撿完并且網(wǎng)頁(yè)所以來(lái)的資源都加載完之后發(fā)生舟铜，因?yàn)槟承┵Y源的加載并不會(huì)阻礙DOM樹(shù)的創(chuàng)建戈盈，所以這兩個(gè)事件多數(shù)時(shí)候不是同時(shí)發(fā)生的塘娶。
第二階段
具體過(guò)程如下：
- CSS文件被CSS解釋器解釋成內(nèi)部表示結(jié)構(gòu)刁岸。
- CSS解釋器工作完之后虹曙，從DOM樹(shù)上附加解釋后的樣式信息，這就是RenderObject樹(shù)酝碳。
- RenderObject樹(shù)節(jié)點(diǎn)在創(chuàng)建時(shí)疏哗，WebKit會(huì)根據(jù)網(wǎng)頁(yè)的層次結(jié)構(gòu)創(chuàng)建RenderLayer樹(shù)返奉，同時(shí)創(chuàng)建一個(gè)虛擬上下文贝搁。
????上述過(guò)程中，RenderObject樹(shù)的建立并不代表DOM樹(shù)會(huì)被銷毀衡瓶，直到網(wǎng)頁(yè)被銷毀徘公，這四個(gè)內(nèi)部結(jié)構(gòu)將一直存在。
第三階段
具體過(guò)程如下：
- 繪圖上下文是一個(gè)與平臺(tái)無(wú)關(guān)的抽象類哮针，它將每個(gè)繪圖操作橋街道不同的具體實(shí)現(xiàn)類关面，也就是繪圖具體實(shí)現(xiàn)類。
- 繪圖實(shí)現(xiàn)類也可能相當(dāng)容易的實(shí)現(xiàn)十厢，也有可能相當(dāng)復(fù)雜的實(shí)現(xiàn)等太。在Chromium中，它需要合成器來(lái)實(shí)現(xiàn)復(fù)雜的多進(jìn)程和GPU加速機(jī)制蛮放。
- 繪圖實(shí)現(xiàn)類將2D圖形庫(kù)和3D圖形庫(kù)繪制結(jié)果保存下來(lái)缩抡，交給瀏覽器來(lái)同瀏覽器界面一起顯示。
????上述過(guò)程實(shí)際上可能不會(huì)那么簡(jiǎn)單瞻想，現(xiàn)在瀏覽器為了高效性和安全性，可能會(huì)引入復(fù)雜的機(jī)制佃迄。而且繪圖不像以前只有單純的軟件渲染滔灶，還有現(xiàn)在的GPU硬件渲染随常、混合渲染模型等方式唆鸡。
總結(jié)
????上面介紹的是一個(gè)完整的渲染過(guò)程⌒蚰浚現(xiàn)代網(wǎng)頁(yè)很多是動(dòng)態(tài)網(wǎng)頁(yè)，渲染完成之后澡绩，由于網(wǎng)站動(dòng)畫(huà)和或者與用戶的交互。瀏覽器會(huì)一直不斷重復(fù)渲染過(guò)程。
