微信公眾號：愛寫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. 編寫高效程式碼注意點

6. 最後

希望本文對你有點幫助。

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

對 全棧開發 有興趣的朋友可以掃下方二維碼關注我的公眾號 —— 愛寫bugger的阿拉斯加

分享 web 開發相關的技術文章，熱點資源，全棧程式設計師的成長之路。

陛下…看完奏摺，點個贊再走吧！