《Webkit技术内幕》之页面渲染过程

时间 2019-11-05

标签 Webkit技术内幕页面渲染过程繁體版

原文原文链接

最近拜读了传说中的《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节点