WebKit 技術內幕之瀏覽器與WebKit內核

微信公衆號：愛寫bugger的阿拉斯加
若有問題或建議，請後臺留言，我會盡力解決你的問題。

前言

此文章是我最近在看的【WebKit 技術內幕】一書的一些理解和作的筆記。
而【WebKit 技術內幕】是基於 WebKit 的 Chromium 項目的講解。

第一章 瀏覽器和瀏覽器內核

WebKit 內核是蘋果2005年先開發並提出開源的，後面 Google 也以此爲基礎，並獨立開發出 Chromium 的，2008年 Google 爲 WebKit 爲內核建立了一個新項目 chormium ，後來 Google 的 chrom 佔領了瀏覽器的大部分市場。

圖 1-6 顯示的是該項目的大模塊。圖中「WebKit 嵌入式接口」就是批的狹義 WebKit，它批的是在 WebCore（包含上面提到的 HTML 解釋器、CSS 解釋器和佈局等模塊）和 JavaScript 引擎之上的一層綁定和嵌入式編程接口，能夠被瀏覽器調用。

Chromium 內核 Blink

2013年4月 gogle宣佈從 WebKit中複製一份出來而後獨立，並運做爲Blink項目。

第二章 HTML網頁與結構

1. 基本組成 html 、css、js。

2. html5新特性 video、canvas、2d、3d等，2012年就推出。

3. 框結構： iframe、frame、frameset，用於嵌入html文檔。

上面的圖說的是 iframe 的應用

4. 層次結構

理解層次結構很是重要，由於它能夠幫忙你理解 WebKit 如何構建它來渲染，這有助於寫高效的 HTML 代碼。

網頁的層次結構是指網頁中的元素可能分佈在不周的層次中，也就是說某些元素能夠不一樣於它的父元素所在的層次，由於某些緣由， WebKit 須要爲該元素和它的子女創建一個新層。

圖中各層的先後關係。「 根層 」 在最後面，「 層 3 」和 「層 4 」 在最前面。規律是須要複雜變換和處理的元素，它們須要新層，因此 WebKit 爲它們構建新層實際上是爲了渲染引擎在處理上的方便和高效。對於不一樣的基於 WebKit 的瀏覽器，分層策略也有可能不同，一般是有一些基本原則的，好比 video 、2d、3d 轉換、canvas 等。

5. WebKit網頁內核的渲染過程

6. 編寫高效代碼注意點

最後

但願本文對你有點幫助。

下期分享 第三章 WebKit 架構與模塊 敬請期待。

我不是大神，也不是什麼牛人，寫這個號的目的是爲了記錄我自學 web全棧 的筆記。

有興趣的朋友能夠掃下方二維碼公衆號—— 愛寫bugger的阿拉斯加

分享 web 開發相關的技術文章，熱點資源，全棧程序員的成長之路

和你們一塊兒交流成長。

只要關注公衆號並回復 福利 便送你六套、而且每套價值 3999 元的視頻資源： Python、Java、Linux、Go、vue、react、javaScript