文章同步到github《Webkit技术内幕》之页面渲染过程 html
最近拜读了传说中的《Webkit技术内幕》一书，有很大收获，尤为是对页面渲染有了较深的认识。因为功力有限，并且书中设计到较多的底层也没法理解，因此本文主要整理和分享一下本身理解的基于Webkit内核浏览器的页面渲染的总体过程，不作深刻介绍(也作不了深刻介绍)。
浏览器内核
浏览器之因此能呈现出更重页面，正是因为浏览器内核的存在，也被称为渲染引擎，主要做用就是，也就是能把HTML/CSS/JavaScript文本其相关的资源转化转化成可视化可交互的图像页面，这个过程就是渲染。
四大主流内核
| 内核 | 浏览器 | 内核识别码 |
|---|---|---|
| Trident | IE、360 | -ms |
| Gecko | Firefox(火狐) | -moz |
| presto | Opera(欧朋) | -o |
| Webkit | Chrome(谷歌) safari(苹果) | -webkit |
Webkit架构
本文主要是基于Webkit内核，因此先放一张整理Webkit架构图(并不是所有模块, 主要包含主要模块),大体介绍一下Webkit的架构前端
自下而上主要分为三层:java
- 1.操做系统层
- 2.Webkit渲染过程当中依赖的不少第三方模块
- 3.Webkit层，主要包含webCore、渲染引擎层、嵌入式接口层，绑定层
1.操做系统层
由Webkit能够运行在不一样的操做系统上，浏览器也能够运行在不一样的操做系统上，另外与对磁盘和内存的操做都须要操做系统来操做，因此须要操做系统支持。说白了就是一切须要对硬件操做的程序都须要操做系统的支持。linux
2.第三方模块层
资源的获取、页面的渲染等须要依赖第三方库来完成，网络库、图形库、视频库等都是Webkit之因此能工做的基础，Webkit来根据须要来使用相应的库。git
3. WebKitCore
WebKitCore部分是全部浏览器共享的部分，是渲染网页的基础，包括HTML解释器、CSS解释器、SVG、DOM、渲染树等github
- 1.HTML解释器
解释HTML文本的解释器，把html文档解析成DOM(文档对象模型)树，表示整个html文档
- 2.CSS解释器
问DOM树中各个元素对象计算出样式信息，后计算后面的网页布局作基础
- 3.布局
把DOM树和解析后的CSS树的信息结合起来，造成一个包含页面全部元素和样式的信息的一个内部表示模型
- 4.绘图
使用第三方依赖的库如2D/3D图形库等将布局计算后的节点绘制成图像
4. JavaScript引擎
对于JavaScript引擎有必要说一下，JavaScript引擎就是将JavaScript代码解析处理并运行的环境，负责整个JavaScript程序的编译及执行过程。web
1.webkit默认的引擎是JavaScriptCore引擎，对于不一样浏览器对于引擎的实现JavaScript引擎的实现也不同，好比Chrome浏览器是基于V8引擎等。后端
2.另外在解析/语法分析，构建出"抽象语法树"以后，会将"抽象语法树"进行编译，转化为一组机器指令，拿一个例子来讲浏览器
var a = 1
JavaScript会建立一个变量a，并分配内存，将1这个值存储在a的变量中。缓存
3.JavaScript能够修改网页内容，也就是修改DOM和和CSS样式，事实上，也正是javaScript代码经过DOM和CSSOM暴露出的接口来进行修改，从而改变页面渲染的效果
5. 绑定层和嵌入式接口层
绑定层和嵌入式接口层最主要与Webkit项目的移植有关，就好比基于linux内核的CentOS、Ubuntu等系统同样。嵌入式接口层主要提供给浏览器调用，不一样浏览器厂商会基Webkit以及对外暴露的接口实现本身的功能。
页面渲染过程
从输入url开始总体介绍一下页面的渲染流程，而后具体步骤再详细加以说明
- 1.用户输入url按下回车后，浏览器开启一个进程对url进行分析，若是是http协议，按照web方式处理
- 2.根据域名进行DNS解析，解析以后发送第二次get请求，进行HTTP协议会话，以获取资源
- 3.此时进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等web服务器;
- 4.继续进入后端应用程序，如PHP、Java等找到对应请求处理，最后由web服务器传送给浏览器资源
- 5.由于资源的位置以URL(统一资源定位符)来区分，发送请求时，若是本地有缓存，发送请求的同时会带上缓存的相关信息，与服务器资源做比较，好比更新时间等，服务器若是没有更新则返回304，直接使用缓存，不然向服务器请求资源。
- 5.浏览器开始下载HTML文档
- 6.浏览器内核开始解析文档(整个html文档就是一大串字符串)，构建DOM树，解析成DOM树的过程当中，若是遇到JavaScript代码，则交给JavaScript引擎来执行，等到DOM树构建完成后触发DOMContentLoaded事件
- 7.解析CSS，构建CSS树，构建CSSOM(在浏览器控制台输入document.styleSheets按下回车就能够看到styleSheetList的集合了)
- 8.CSS解析完成以后，在DOM树的基础上附加解释后的样式信息，造成RenderObject树，在RenderObject节点建立的同时，webkit会根据网页层次构建出RenderLayer树，同时构建出一个虚拟的绘图上下文(与平台无关的抽象类)，最后根据绘图上下文(须要依赖2D/3D库)进行绘制，最终也就是用户看到的可交互的页面。
页面渲染细节
上面介绍了页面从输入url发送请求后到页面渲染的总体流程，下面补充一下在这整个过程当中的一些细节知识点，方面更好的理解页面的渲染过程
1. 首先理解页面是分层次的，好比说以下代码片断代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p>aaa</p>
<video src="xxx.mp4"></video>
</div>
</body>
</html>
当网页构建层次的时候，html元素为根层，此时建立一个层，html元素的全部子节点、子节点的子节点，依次类推，如dody，div，p为普通元素，并不会建立新的层次接口，video元素须要进行建立新层来进行视频处理和渲染。
以下状况，都须要创建新的RenderLayer节点
备注: 图片直接截取于《Webkit技术内幕》
2.从资源字节流到构建成DOM树
备注: 图片直接截取于《Webkit技术内幕》
- 1.分词/词法分析，从字节流到字符流流(串)，是分段的词法解释器会将字符串解释成标记(至关于字典中的词语)
如 var a = 1; var、a、=、1 、;。空格是否会被看成词法单元，取决于空格在
这门语言中是否具备意义。
- 2.解析/语法分析，基于词法解释器生成的新标记，构建成“抽象语法树”，解析器尝试将其与某条语法规则进行匹配。若是发现了匹配规则，解析器会将一个对应于该标记的节点添加到解析树中，而后继续请求下一个标记
3.HTML文档对应的DOM树的对应关系
4.DOM树和RenderObject树之间的对应关系
备注: 图片直接截取于《Webkit技术内幕》
5. RenderObject树与RenderLayer树之间的对应关系
多对一的关系，RenderObject多个节点能够对应RenderLayer的一个层次结构
备注: 图片直接截取于《Webkit技术内幕》
以上文章就是整理的页面渲染总体流程，不少细节没有具体讲，好比解析html文档时，利用栈来处理、绘制3D图形的GPU加速等、因为能力有限不敢多讲，也难讲清楚，这些仍是去看大神们具体的书比较，感兴趣的小伙伴，《WebKit技术内幕》了解一下
本文主要参考资料: