最近看了< webkit技術(shù)內(nèi)幕 >，雖然并不能完全看懂，但是對(duì)瀏覽器的渲染機(jī)制也算是有了一個(gè)比較完整的認(rèn)識(shí)。
我們從瀏覽器地址欄輸入網(wǎng)址開始到web頁(yè)面被完整的呈現(xiàn)在眼前，大概的經(jīng)過(guò)了這樣一個(gè)過(guò)程：網(wǎng)址被DNS解析為IP地址 -> 通過(guò)IP地址建立TCP連接 -> 發(fā)送HTTP請(qǐng)求 -> 服務(wù)器處理請(qǐng)求并返回響應(yīng) -> 瀏覽器解析渲染頁(yè)面 -> 斷開TCP連接
可是瀏覽器是怎么去解析渲染頁(yè)面的呢？這里就要涉及到瀏覽器的內(nèi)核，也就是瀏覽器的渲染引擎（嚴(yán)格來(lái)說(shuō)應(yīng)該是渲染引擎 + Javascript引擎），頁(yè)面的渲染工作便是由渲染引擎完成的。需要注意瀏覽器和瀏覽器內(nèi)核是不同的概念，瀏覽器指的是 Chrome、Firefox 等，而瀏覽器內(nèi)核則是 Blink、Gecko 等，瀏覽器內(nèi)核只負(fù)責(zé)渲染，GUI 及網(wǎng)絡(luò)連接等跨平臺(tái)工作則是瀏覽器實(shí)現(xiàn)的。主流的渲染引擎包括Trident、Gecko、Webkit，它們分別是IE、火狐和Chrome的內(nèi)核（2013年，Google宣布了Blink內(nèi)核，它其實(shí)是從Webkit復(fù)制出去的）。一般渲染引擎主要包括HTML解釋器、CSS解釋器、Javascript引擎、布局、繪圖等模塊。當(dāng)然這些模塊還依賴很多其他的基礎(chǔ)模塊。
我們先簡(jiǎn)單的了解一下渲染引擎各個(gè)主模塊所做的工作（以下所有的介紹以 webkit 為介紹對(duì)象）
HTML解釋器 ：HTML解釋器的工作就是將網(wǎng)絡(luò)或者本地磁盤獲取到的HTML網(wǎng)頁(yè)和資源從字節(jié)流解釋成DOM樹的結(jié)構(gòu)（首先是字節(jié)流，經(jīng)過(guò)解碼之后是字符流，然后通過(guò)詞法分析器會(huì)被解釋成詞語(yǔ)（TOKENS），經(jīng)過(guò)語(yǔ)法分析器構(gòu)建成節(jié)點(diǎn)，最后這些節(jié)點(diǎn)被組建成一顆DOM樹）
CSS解釋器 ：CSS字符串被CSS解釋器處理后變成渲染引擎的內(nèi)部規(guī)則表示。（樣式規(guī)則建立完成之后，webkit會(huì)保存規(guī)則結(jié)果，當(dāng)DOM的節(jié)點(diǎn)建立之后，webkit會(huì)為可視化節(jié)點(diǎn)選擇合適的樣式信息，即作樣式規(guī)則匹配）
Javascript引擎 ：將Javascript代碼處理并執(zhí)行，一個(gè)Javascript引擎可以包括以下幾個(gè)部分 ->
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式