webkit渲染引擎大致结构
图片说明
图片中的实现部分是web渲染引擎的所有移植的共有部分，虚线是不同产商自主开发实现部分。
操作系统是管理和控制计算机硬件和软件资源的计算机程序。任何其他软件都要在操作系统的支持下运行。webkit也是在操作系统上工作。
第三方库提供视频图像库支持
webCore中包括HTML解析器，css解析器，dom和svg等。
JSCore是webkit的默认引擎。在google系列中被替换成v8引擎。
webkit ports是非共享部分，也是不同浏览器性能不同功能差异的关键部分。

渲染流程
1.浏览器接收到HTML文件转换成DOM树。
浏览器接收到字节数据，转换成字符串，网页字符串交给HTML解析器，通过词法分析转换成token标记。介者解析器根据token构建节点，形成DOM树。
（1）脚本处理
浏览器解析html时，遇到script标签会立即解析脚本，停止解析文档。因为js可能会改动dom和css造成解析浪费。
如果脚本是外部的则会等待脚本下载完毕。再继续解析文档。脚本解析会将脚本中改变DOM和CSS的地方分别解析出来，追加到DOM Tree和Style Rules上。
（2）其他资源文件
如果节点依赖其他资源，如图片\css、视频等，调用资源加载器加载它们，但这些是异步加载的，不会阻碍当前DOM树继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树创建，直到JavaScript加载并被JavaScript引擎执行后才继续DOM树的创建
2.将CSS文件转换成CSSOM树。
css生成cssom树，会确定每一个节点的样式。并切因为通过递归确认样式，十分耗费资源。CSSOM树和DOM树的结构非常类似。
3.DOM树和CSSOM树会构造Rendering Tree。
4.布局（layout）， 根据Render Tree计算每个节点的位置大小等信息
5.绘制（Painting ）根据计算好的信息绘制整个页面

为了更好的用户体验，渲染引擎会尽可能早的将内容呈现在屏幕上，并不会等到所有的html解析完成再去构建布局render树。解析完一部分就显示一部分。同时可能还在通过网络下载其余内容。

当浏览器获得一个html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。
加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。css不妨碍DOM的解析，但是会阻塞页面渲染。
遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载，
但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。如果js文件中依赖于CSS，则需要等css解析完成后才能执行。同时，浏览器遇到没有defer和async属性的标签时，会触发页面渲染。

Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。

https://www.jianshu.com/p/b81066810bd0
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html