最近看了< 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引擎可以包括以下幾個部分 ->
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現JSON轉Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數據結構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式