今天在推特看到一篇文章《当页面渲染时,浏览器发生了什么》,因而找了些资料,分享一下所得。html
浏览器主要分为这及部分。前端
User Interfaceweb
用户接口。浏览器中的地址栏、前进后退、书签菜单等。除了网页显示区域之外的都是。
Brower engineshell
浏览器引擎。查询与操做渲染引擎的接口。
Rendering engine数据库
渲染引擎。今天的内容主角就是它~负责显示请求的内容
Networking浏览器
网络。用于网络请求,例如HTTP请求。
JavaScript Interpreter网络
用于解析执行JavaScript代码
UI Backend布局
绘制基础原件,好比组合框、窗口。
Data Persistence网站
持久层。HTML5规定了完整的浏览器中的数据库:web database
Webkit主要流程以下:
ui
Mozilla的Gecko渲染引擎主要流程
由图能够发现,两个引擎过程基本相同。主要有三个步骤:
解析。浏览器会解析HTML/SVG/XHTML,事实上,webkit有三个C++的类对应这三类文档。浏览器解析这三种文件会产生一个DOM Tree;解析CSS,产生style rules;解析Javacript,主要经过DOM API和CSSOM API来操做DOM Tree和CSS Rule Tree
解析完成后,浏览器引擎会经过DOM Tree和CSS Rule Tree来构造Rendering Tree。
调用操做系统Native GUI的API绘制。
两个引擎的差异在于它们起的名字不同,即语义差异:
webkit把可视化好的可视元素成为Render Tree,用Layout来表示元素的布局
Gecko把可视化好的可视元素成为Frame Tree,每一个元素就是一个frame,元素的布局成为Reflow
固然,也不是只有语义差异。还有一个细小的差异差异在于:
Gecko在HTML与DOM树之间还多一个层content Sink,这是建立DOM对象的工厂。
解析由两部分组成:分词+构建树。
HTML5规范中,HTML解析流程以下图:
分词是词法分析,把输入解析成符号序列。
构建树的过程就是在不断处理分词器完成的节点。除了把元素添加到DOM树上,还会将其添加到一个开放元素堆栈,用于纠正嵌套错误和标签未关闭错误。
但其实浏览器比咱们想象的更强大更包容。浏览器的错误处理至关统一,虽然这不是当前HTML规范的一部分。当不少格式不良的HTML文档出如今不少网站,浏览器会尝试用和其余浏览器同样的方式修复错误。
<html> <head> <title>Web page parsing</title> </head> <body> <div> <h1>Web page parsing</h1> <p>This is an example Web page.</p> </div> </body> </html>
DOM Tree解析以下:
Webkit使用Flext and Bison 解析器生成器,经过CSS语法文件自动建立解析器。Bison会建立自下而上的移位归约解析器。Firefox使用的是人工编写的自上而下的解析器。
关于建立树的流程以及样式计算、重排重绘等部分,留到下一篇文章再写咯~
参考文献: