Webkit - 简介

[官网]
    ：https://webkit.org/
  ：https://github.com/WebKit/webkit
[Blink - chromium]
    ：https://www.chromium.org/
    ：https://github.com/chromium/chromium

WebKit技术内幕 朱永盛 201406.pdf

开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和 Trident（也称MSHTML，IE 使用）。

其也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。

WebKit 前身是 KDE 小组的 KHTML，WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS。

[浏览器内核引擎，基本上是四分天下]

    ：Trident: IE 以Trident 作为内核引擎

  ：Gecko : Firefox 是基于 Gecko 开发

  ：WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发

  ：Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台 --Opera mini

 注：2013年2月Opera宣布转向WebKit引擎

 注：2013年4月Opera宣布放弃WEBKIT, 跟随GOOGLE的新开发的blink引擎

浏览器发展简史

1990年 Berners-Lee 发明了 WorldWideWeb 浏览器，后改名 Nexus，在1991年公布了源码。

1993年 Marc Andreessen 的团队开发了 Mosaic，1994年推出我们熟悉的 Netscape Navigator 网景浏览器，在最火爆的时候曾占是绝大多数人的选择。同时他还成立了网景公司。

1995年微软推出了 Internet Explorer 浏览器，简称 IE，通过免费绑定进 Windows 95 系统最终替代了 Netscape，赢得了浏览器大战。

1998年网景公司成立了 Mozilla 基金会组织，同时开源浏览器代码，2004年推出有多标签和支持扩展的 Firefox 火狐浏览器开始慢慢的占领市场份额。

2003年苹果发布了 Safari 浏览器，2005年放出了核心源码 WebKit。

2008年 Google 以苹果的 WebKit 为内核，建立了新的项目 Chromium，在此基础上开发了自己浏览器 Chrome。

2012年 WHATWG 和 W3C 推出 HTML5 技术规范。HTML5 包含了10大类别，offline 离线，storage 存储，connectivity 连接，file access 文件访问，semantics 语义，audio / video 音频视频，3D/graphics 3D和图形，presentation 展示，performance 性能和 Nuts and bolts 其它。

WEBKIT 架构图

渲染机制 [HTML解释器、CSS解释器、Javascript引擎、布局、绘图等模块]

[HTML解释器]

    ：将网络或者本地磁盘获取到的HTML网页和资源从字节流解释成DOM树的结构

  ：字节流 -> 字符流 -> [词法分析器] 词语(TOKENS) -> [语法分析器] 节点

  -> 节点被组建成一颗DOM树

[CSS解释器]

  ：CSS字符串被CSS解释器处理后变成渲染引擎的内部规则表示

  -> 建立样式规则并保存, 等待当DOM的节点建立之后, 可视化节点选择合适的样式信息, [样式规则匹配]

[Javascript引擎]

    ：JS代码处理并执行, 一个Javascript引擎可以包括以下几个部分

　　-> 编译器 -> 源代码编译成抽象语法树，在某些引擎中还包括将抽象语法树转换为字节码（JavascriptCore 引擎）

　　-> 解释器-> 在某些引擎中, 解释器主要是接收字节码, 解释执行字节码, 同时也依赖垃圾回收机制等。

　　-> JIT工具 -> 将字节码或者抽象语法树转换为本地代码 （V8 引擎）

　　-> 垃圾回收器和分析工具

[布局]

    ：计算RenderObject对象的位置、大小等信息

[绘图]

    ：将构建好的渲染内部表示模型使用图形库绘制出来

[数据的流向, 渲染的过程分为三个阶段]

    ：第一个阶段是从网页的url到构建完dom树

  ：第二个阶段是从dom树到构建完webkit的绘图上下文

  ：第三个阶段是从绘图上下文到生成最后的图像

1>、当用户输入网页url的时候，webkit调用资源加载器加载对应的网页

2>、加载器依赖网络模块建立连接，发生请求并接收响应

3>、webkit接收到各种网页或者资源的数据，其中某些资源可能是同步或者异步的方式获取的

4>、网页被交给HTML解释器解释成一系列词语（Token）

5>、解释器根据词语构建节点（Node），形成DOM树

6>、如果节点是Javascript代码的话，调用Javascript引擎解释执行

7>、Javascript代码可能会修改DOM树的结构

8>、如果有节点需要依赖其他的资源，比如图片、css、视频等，调用资源加载器来加载它们，不过这个过程是异步的，不会阻碍当前DOM树的继续构建。如果是Javascript资源 url （没有标记异步方式），则需要停止当前DOM树的构建，直到Javascript的资源被加载并被Javascript引擎解释执行后才继续DOM树的创建。

Webkit借助 css 和 dom 树构建RenderObject树直到绘图上下文

1>、css文件被css解释器解释为内部表示结果

2>、css解释器完成工作之后在dom树上附加解释后的样式信息，这就是RenderObject树

3>、RenderObject节点被创建的同时，webkit会根据网页的层次结构创建RenderLayer树，同时创建一个虚拟的绘图上下文。

WebKit 源代码结构

[JavaScriptCore]

    ：默认 JavaScript 引擎，Google 已经使用了 V8 作为其 Chromium 的 JS 引擎

[WebCore]

    ：浏览器渲染引擎，包含了各个核心模块

[WebCore/css]

    ：CSS 解释器，CSS 规则等

[WebCore/dom]

    ：各种 DOM 元素和 DOM Tree 结构相关的类

[WebCore/html]

    ：HTML 解释器和各种 HTML 元素等相关内容

[WebCore/rendering]

    ：Render Object 相关，还有页面渲染的样式和布局等

[WebCore/inspector]

    ：网页调试工具

[WebCore/loader]

    ：主资源和派生资源的加载相关实现，还有派生资源的 Memory Cache 等

[WebCore/page]

    ：页面相关的操作，页面结构和交互事件等

[WebCore/platform]

    ：各个平台相关的代码，比如 iOS，Mac 等

[WebCore/storage]

    ：存储相关，比如 WebStorage，Index DB 等接口的实现

[WebCore/workers]

    ：Worker 线程封装，提供 JS 多线程执行环境

[WebCore/xml]

    ：XML 相关比如 XML Parser，XPath，XSLT 等

[WebCore/accessibility]

    ：图形控件访问接口

[WebCore/bindings]

    ：DOM 元素和 JS 绑定的接口

[WebCore/bridge]

    ：C，JavaScript 和 Objective-C 的桥接

[WebCore/editing]

    ：页面编辑相关，比如 DOM 修改，拼写检查等

[WebCore/history]

    ：Page Cache 实现前进后退浏览记录等

[WebCore/mathml]

    ：数学表达式在网页中的规范代码实现

[WebCore/plugins]

    ：NPPlugin 的支持接口

[WebCore/svg]

    ：矢量图形的支持

[WebKit]

    ：平台相关的接口，每个目录都是不同的平台接口实现

[WTF]

    ：基础类库，类似 C++ 的 STL 库，有比如字符串操作，智能指针，线程等

[DumpRenderTree]

    ：用于生成 RenderTree

[TestWebKitAPI]

    ：测试 WebKit 的 API 的测试代码