最近看了< webkit技術內幕 >,雖然并不能完全看懂,但是對瀏覽器的渲染機制也算是有了一個比較完整的認識。

我們從瀏覽器地址欄輸入網址開始到web頁面被完整的呈現在眼前,大概的經過了這樣一個過程:網址被DNS解析為IP地址 -> 通過IP地址建立TCP連接 -> 發(fā)送HTTP請求 -> 服務器處理請求并返回響應 ->  瀏覽器解析渲染頁面 -> 斷開TCP連接

可是瀏覽器是怎么去解析渲染頁面的呢?這里就要涉及到瀏覽器的內核,也就是瀏覽器的渲染引擎(嚴格來說應該是渲染引擎 + Javascript引擎),頁面的渲染工作便是由渲染引擎完成的。需要注意瀏覽器和瀏覽器內核是不同的概念,瀏覽器指的是 Chrome、Firefox 等,而瀏覽器內核則是 Blink、Gecko 等,瀏覽器內核只負責渲染,GUI 及網絡連接等跨平臺工作則是瀏覽器實現的。主流的渲染引擎包括Trident、Gecko、Webkit,它們分別是IE、火狐和Chrome的內核(2013年,Google宣布了Blink內核,它其實是從Webkit復制出去的)。一般渲染引擎主要包括HTML解釋器、CSS解釋器、Javascript引擎、布局、繪圖等模塊。當然這些模塊還依賴很多其他的基礎模塊。

我們先簡單的了解一下渲染引擎各個主模塊所做的工作(以下所有的介紹以 webkit 為介紹對象)

HTML解釋器 :HTML解釋器的工作就是將網絡或者本地磁盤獲取到的HTML網頁和資源從字節(jié)流解釋成DOM樹的結構(首先是字節(jié)流,經過解碼之后是字符流,然后通過詞法分析器會被解釋成詞語(TOKENS),經過語法分析器構建成節(jié)點,最后這些節(jié)點被組建成一顆DOM樹)

CSS解釋器 :CSS字符串被CSS解釋器處理后變成渲染引擎的內部規(guī)則表示。(樣式規(guī)則建立完成之后,webkit會保存規(guī)則結果,當DOM的節(jié)點建立之后,webkit會為可視化節(jié)點選擇合適的樣式信息,即作樣式規(guī)則匹配)

Javascript引擎 :將Javascript代碼處理并執(zhí)行,一個Javascript引擎可以包括以下幾個部分 ->

延伸閱讀

學習是年輕人改變自己的最好方式-Java培訓,做最負責任的教育,學習改變命運,軟件學習,再就業(yè),大學生如何就業(yè),幫大學生找到好工作,lphotoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓學習是年輕人改變自己的最好方式