文章同步到github《Webkit技术内幕》之页面渲染过程

最近拜读了传说中的《Webkit技术内幕》一书，有很大收获，尤其是对页面渲染有了较深的认识。由于功力有限，而且书中设计到较多的底层也无法理解，所以本文主要整理和分享一下自己理解的基于Webkit内核浏览器的页面渲染的整体过程，不做深入介绍(也做不了深入介绍)。

浏览器内核

浏览器之所以能呈现出更重页面，正是由于浏览器内核的存在，也被称为渲染引擎，主要作用就是，也就是能把HTML/CSS/JavaScript文本其相关的资源转化转化成可视化可交互的图像页面，这个过程就是渲染。

四大主流内核

内核 浏览器 内核识别码
Trident IE、360 -ms
Gecko Firefox(火狐) -moz
presto Opera(欧朋) -o
Webkit Chrome(谷歌) safari(苹果) -webkit

Webkit架构

本文主要是基于Webkit内核，所以先放一张整理Webkit架构图(并非全部模块, 主要包含主要模块),大致介绍一下Webkit的架构

自下而上主要分为三层:

  • 1.操作系统层
  • 2.Webkit渲染过程中依赖的很多第三方模块
  • 3.Webkit层，主要包含webCore、渲染引擎层、嵌入式接口层，绑定层

1.操作系统层

由Webkit可以运行在不同的操作系统上，浏览器也可以运行在不同的操作系统上，另外与对磁盘和内存的操作都需要操作系统来操作，所以需要操作系统支持。说白了就是一切需要对硬件操作的程序都需要操作系统的支持。

2.第三方模块层

资源的获取、页面的渲染等需要依赖第三方库来完成，网络库、图形库、视频库等都是Webkit之所以能工作的基础，Webkit来根据需要来使用相应的库。

3. WebKitCore

WebKitCore部分是所有浏览器共享的部分，是渲染网页的基础，包括HTML解释器、CSS解释器、SVG、DOM、渲染树等

  • 1.HTML解释器

解释HTML文本的解释器，把html文档解析成DOM(文档对象模型)树，表示整个html文档

  • 2.CSS解释器

问DOM树中各个元素对象计算出样式信息，后计算后面的网页布局做基础

  • 3.布局

把DOM树和解析后的CSS树的信息结合起来，形成一个包含页面所有元素和样式的信息的一个内部表示模型

  • 4.绘图

使用第三方依赖的库如2D/3D图形库等将布局计算后的节点绘制成图像

4. JavaScript引擎

对于JavaScript引擎有必要说一下，JavaScript引擎就是将JavaScript代码解析处理并运行的环境，负责整个JavaScript程序的编译及执行过程。

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技术内幕》了解一下

本文主要参考资料:

WebKit技术内幕
Chrome 渲染优化 - 层模型
前端文摘：深入解析浏览器的幕后工作原理

《Webkit技术内幕》之页面渲染过程的更多相关文章

  1. WebKit技术内幕

    WebKit技术内幕(浏览器内核|渲染引擎| HTML5| Chromium项目Committer重磅作品) 朱永盛 著   ISBN 978-7-121-22964-0 2014年6月出版 定价:7 ...

  2. webkit技术内幕读书笔记 (四)

    资源缓存 资源缓存的目的是为了提高资源使用的效率,其基本思想是建立一个资源的缓存池,当需要请求资源的时候先去资源池查找是否有相应的资源,如果没有则向服务器发送请求,webkit收到资源后将其设置到该资 ...

  3. webkit技术内幕读书笔记 (二、三)

    可视区和网页 通常网页比屏幕的可视区面积要大,因此当网页内容在可视区中放不下时,一般浏览器会提供滚动条. 从URL到构建完DOM树的过程 当用户输入网页URL的时候,WebKit调用其资源加载器加载该 ...

  4. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  5. webkit技术内幕读书笔记 (一)

    本文部分摘录自互联网. Chromeium与Chrome Chromium是Google为发展自家的浏览器Google Chrome而打开的项目,所以Chromium相当于Google Chrome的 ...

  6. webkit 技术内幕 笔记 三

    浏览器内核及特性 在浏览器中,一个很重要的模块,是将页面转变成可视化的图像结果,这就是浏览器的内核,通常被称作渲染引擎.渲染:就是根据描述或者定义构建数学模型,通过模型生成图像的过程.浏览器的渲染引擎 ...

  7. html页面渲染过程

    1.解析html文件,创建DOM树 自上而下解析,遇到任何样式(link.style)和脚本(script)都会阻塞 1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染 2)css加载会阻 ...

  8. webkit 技术内幕 笔记 二

    浏览器历史 80年代末-90年代初:worldwideweb(nexus) -- Berners-Lee 1993: Mosaic浏览器,后来叫网景(Netscape)--Marc Andreesse ...

  9. webkit 技术内幕 笔记 一

    目前应用最广的渲染引擎项目-webkit webkit 内部渲染html网页的原理 webkit 内容工作原理 web 的接入口浏览器 浏览器的内核-渲染引擎(像webkit)

随机推荐

  1. Linux内核调试方法总结之ptrace

    ptrace [用途] 进程跟踪器,类似于gdb watch的调试方法 [原理][详细说明参考man ptrace帮助文档] ptrace系统调用主要是父进程用来观察和控制子进程的执行过程.检查并替换 ...

  2. Rtmp AAC基本格式（转）

    第一个audio data包:AAC sequence header 第二个audio data包:AAC raw AF表示的含义: 1)第一个字节af,a就是10代表的意思是AAC, Format ...

  3. PHP密码和token

    密码 直接md5和sha1不安全!!! crypt()和hash_equals(): http://php.net/manual/zh/function.crypt.php <?php // c ...

  4. mysql依据某一张表的字段，查询出对应的表所在的数据库

    表太多,只记得这个表有一个mygame的字段,但是并不知道这张表在那个数据库下,只能根据这个字段查找对应的表和所在数据库 select table_schema,table_name from inf ...

  5. UI自动化之异常与截图处理

    对操作不成功时,希望能够继续执行其他操作,或者是,希望操作不成功时,能够写日志记录 目录 1.常见异常 2.截图处理 1.常见异常 1.NoSuchElementException:没有找到元素 2. ...

  6. js 创建对象的方法

    <script> //1.字面量语法 var rectangle1 = {}; rectangle1.name="mindong"; rectangle1.width ...

  7. 模拟鼠标向下滚动 http://bbs.2ccc.com/topic.asp?topicid=461769

    我想模拟鼠标滚轮,下面的代码能向上滚动,怎么样下向滚动啊 mouse_event( MOUSEEVENTF_WHEEL,0,0,WHEEL_DELTA,0); 我把参数设置为mouse_event(  ...

  8. GMSSL在Window下的编译

    因为工作需要用到SM2算法加解密,网络上找一圈,没有合用的,还被骗了一堆积分. 无奈只得自行编译,从GITHUB的GMSSL下载到最新的SSL库,VS2012下编译踩了不少坑,记录一下 GITHUB链 ...

  9. sql中的isnull

    ISNULL 使用指定的替换值替换 NULL. 语法ISNULL ( check_expression , replacement_value ) 参数check_expression 将被检查是否为 ...

  10. MySQL练习与小结

    当你专注一件事的时候,时间总是过得很快! foreign key 练习 -- 切换数据库 use stumgr -- 删除班级表 drop table t_class1 -- 创建一个班级表 crea ...