微信公众号：爱写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