WebKit 技术内幕之浏览器与WebKit内核

微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决你的问题。

前言

此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

第一章浏览器和浏览器内核

WebKit 内核是苹果2005年先开发并提出开源的，后面 Google 也以此为基础，并独立开发出 Chromium 的，2008年 Google 为 WebKit 为内核创建了一个新项目 chormium ，后来 Google 的 chrom 占领了浏览器的大部分市场。

WebKit 图 1-6 显示的是该项目的大模块。图中“WebKit 嵌入式接口”就是批的狭义 WebKit，它批的是在 WebCore（包含上面提到的 HTML 解释器、CSS 解释器和布局等模块）和 JavaScript 引擎之上的一层绑定和嵌入式编程接口，可以被浏览器调用。

WebKit2.png

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.png

image.png

上面的图说的是 iframe 的应用

4. 层次结构

理解层次结构非常重要，因为它可以帮忙你理解 WebKit 如何构建它来渲染，这有助于写高效的 HTML 代码。

网页的层次结构是指网页中的元素可能分布在不周的层次中，也就是说某些元素可以不同于它的父元素所在的层次，因为某些原因， WebKit 需要为该元素和它的子女建立一个新层。

image.png

图中各层的前后关系。“ 根层 ” 在最后面，“ 层 3 ”和 “层 4 ” 在最前面。规律是需要复杂变换和处理的元素，它们需要新层，所以 WebKit 为它们构建新层其实是为了渲染引擎在处理上的方便和高效。对于不同的基于 WebKit 的浏览器，分层策略也有可能不一样，通常是有一些基本原则的，比如 video 、2d、3d 转换、canvas 等。