本日在推特看到一篇文章《当页面衬着时，浏览器发生了什么》，因而找了些材料，分享一下所得。
浏览器的重要观点
浏览器重要分为这及部份。
User Interface
用户接口。浏览器中的地址栏、行进退却、书签菜单等。除了网页显现地区之外的都是。Brower engine
浏览器引擎。查询与操纵衬着引擎的接口。Rendering engine
衬着引擎。本日的内容主角就是它~担任显现要求的内容Networking
收集。用于收集要求，比方HTTP要求。JavaScript Interpreter
用于剖析实行JavaScript代码UI Backend
绘制基础原件，比方组合框、窗口。Data Persistence
耐久层。HTML5划定了完全的浏览器中的数据库：web database
重要流程
Webkit重要流程以下：
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对象的工场。
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剖析以下：
CSS剖析
Webkit运用Flext and Bison 剖析器生成器，经由过程CSS语法文件自动建立剖析器。Bison会建立自下而上的移位归约剖析器。Firefox运用的是人工编写的自上而下的剖析器。
关于建立树的流程以及款式盘算、重排重绘等部份，留到下一篇文章再写咯~
参考文献：
