文章同步到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.另外在解析/语法分析，构建出"抽象语法树"之后，会将"抽象语法树"进行编译，转化为一组机器指令，拿一个例子来说

  1. 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. 首先理解页面是分层次的，比如说如下代码片段代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <p>aaa</p>
  10.         <video src="xxx.mp4"></video>
  11.     </div>
  12. </body>
  13. </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. NSIS打包后无法解压7z资源包的问题

    以前产品一直都是好好的.今天突然不行了.找了半天原因,原来发现7Z的压缩属性变成了"LZMA2"了. 要LZMA才行.

  2. fedora23安装firefox中的flash插件-最终解决问题是: 要给libflashplayer.so以777权限, 开始给的755权限没有实现!

    下载的flash插件是一个rpm包. ===================================== rpm查看文件属于哪个包? 要看这个rpm包安装过还是没有安装过? (如果不用-p就是 ...

  3. android hidl

    1.定义.hal接口文件,如: 在vendor/sprd/interface中新建目录hello,其中定义好hidl接口,如: package vendor.sprd.hardware.hello@1 ...

  4. 测开之路八十六：python操作sqlite

    创建sqlite数据库,并创建表和数据 python自带sqlite3库可以创建数据库文件 导入库:import sqlite3 创建游标,指定数据库名字:con = sqlite3.connect( ...

  5. 锐捷网络自动连接python脚本

    1 实现锐捷网络的连接,当断开后自动重连 import os import sys import time ip = 'www.baidu.com' print('开始ping百度') backinf ...

  6. KETTLE——（二）数据抽取

    过了个春节,好长时间没有更新了,今天接着写第二部分——数据抽取. 进入界面以后会发现左侧菜单有两个东西:转换和作业:简单说一下,转换是单次的转换,不可重复,但可重复利用:作业是汇聚了其他操作和多次(可 ...

  7. python程序的模块与包

    python的程序是由模块组成的,一个python文件就是一个模块,而模块一般由代码,函数,或者类组成.创建baiduHq.py模块(文件),在该模块中编写变量,函数,类,来说明在一个模块中,变量的输 ...

  8. idea多行注释缩进

    选中多行代码 - 按下tab键——向后整体移动 选中多行代码 - 按下shift + tab键——向前整体缩进(整体去掉代码前面的空格)

  9. 使用 Spring HATEOAS 开发 REST 服务

    使用 Spring HATEOAS 开发 REST 服务 学习博客:https://www.ibm.com/developerworks/cn/java/j-lo-SpringHATEOAS/ htt ...

  10. linux启动内核源码分析

    内核的启动时从main.c这个文件里面的start_kernel函数开始的,这个文件在linux源码里面的init文件夹下面 下面我们来看看这个函数 这个函数很长,可以看个大概过去 asmlinkag ...