《Webkit技术内幕》之页面渲染过程
文章同步到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 = 1JavaScript会创建一个变量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技术内幕》之页面渲染过程的更多相关文章
- WebKit技术内幕
WebKit技术内幕(浏览器内核|渲染引擎| HTML5| Chromium项目Committer重磅作品) 朱永盛 著 ISBN 978-7-121-22964-0 2014年6月出版 定价:7 ...
- webkit技术内幕读书笔记 (四)
资源缓存 资源缓存的目的是为了提高资源使用的效率,其基本思想是建立一个资源的缓存池,当需要请求资源的时候先去资源池查找是否有相应的资源,如果没有则向服务器发送请求,webkit收到资源后将其设置到该资 ...
- webkit技术内幕读书笔记 (二、三)
可视区和网页 通常网页比屏幕的可视区面积要大,因此当网页内容在可视区中放不下时,一般浏览器会提供滚动条. 从URL到构建完DOM树的过程 当用户输入网页URL的时候,WebKit调用其资源加载器加载该 ...
- 二、Vue 页面渲染过程
前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...
- webkit技术内幕读书笔记 (一)
本文部分摘录自互联网. Chromeium与Chrome Chromium是Google为发展自家的浏览器Google Chrome而打开的项目,所以Chromium相当于Google Chrome的 ...
- webkit 技术内幕 笔记 三
浏览器内核及特性 在浏览器中,一个很重要的模块,是将页面转变成可视化的图像结果,这就是浏览器的内核,通常被称作渲染引擎.渲染:就是根据描述或者定义构建数学模型,通过模型生成图像的过程.浏览器的渲染引擎 ...
- html页面渲染过程
1.解析html文件,创建DOM树 自上而下解析,遇到任何样式(link.style)和脚本(script)都会阻塞 1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染 2)css加载会阻 ...
- webkit 技术内幕 笔记 二
浏览器历史 80年代末-90年代初:worldwideweb(nexus) -- Berners-Lee 1993: Mosaic浏览器,后来叫网景(Netscape)--Marc Andreesse ...
- webkit 技术内幕 笔记 一
目前应用最广的渲染引擎项目-webkit webkit 内部渲染html网页的原理 webkit 内容工作原理 web 的接入口浏览器 浏览器的内核-渲染引擎(像webkit)
随机推荐
- vue 通过绑定事件获取当前行的id
<div @click="router(items.productId)" style="float: left;" :key='items.produc ...
- Window7 系统下重新建立一个新分区
为了方便使用,准备在原来分区上再分割出一个分区,步骤如下 首先右击计算机,选择管理打开计算机管理窗口,选择磁盘管理,当前窗口右侧会出现当前计算机所有已存在的分区列表. 选择要进行分区的磁盘,右击选择压 ...
- uid auid euid的区别
关于euid suid guid,参考这篇很好的文章 uid auid euid的区别? initially: 最初地, 一开始地 jackson had initially bloodied his ...
- leetcode 695 Max Area of Island 岛的最大面积
这个题使用深度优先搜索就可以直接遍历 DFS递归方法: class Solution { public: vector<vector<,},{,-},{,},{,}}; int maxAr ...
- 爱好-超级IP：超级IP
ylbtech-爱好-超级IP:超级IP IP,是Intellectual Property的缩写,字面粗译为“知识产权”,特指具有长期生命力和商业价值的跨媒介内容运营.一个具有可开发价值的真正的I ...
- Flask框架—flask_sqlalchemy组件使用
一.flask_sqlalchemy组件 我们之前学过SQLAlchemy,一个独立的数据库关系对象映射,其实在flask中也有官方认可的第三方SQLAlchemy组件,用于处理flask中对象关系映 ...
- 错误 error: The following untracked working tree files would be overwritten by merge:README.md
问题类型 相信很多小伙伴在创建新的git仓库后,会选上添加README.md文件,开始我也没太在意,应该也没有什么问题. 但是当我通过git添加远程仓库,给这个仓库上传代码时,出现了如下问题:erro ...
- 每日js练习
第一次玩codewars,选了个最简单的题目 要求是: You have to write a function that describe Leo: if oscar was (integer) 8 ...
- 监控java的进程启动情况（bat）
最近有个项目需要检测某个软件崩溃重启的间隔和重启时间,百度了一下,按照自己的需求做了相应的修改 @echo off rem 定义需监控程序的进程名和程序路径,可根据需要进行修改 set AppName ...
- leveldb memtable
memtable常驻于内存,需要按照key进行排序,通常意义上的话,可以使用二叉查找树来实现,跟进一步可以使用红黑树保证树的平衡,但是leveldb中使用了另外的一种数据结构:跳表Skip List. ...