工作原理
1、解析HTML构建Dom树（Document Object Model，文档对象模型），DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口。
2、构建渲染树，渲染树并不等同于Dom树，像head标签 或 display: none这样的元素就不需要放到渲染树中了，但它们在Dom树中。
3、对渲染树进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫"layout" 或 “reflow”。
4、绘制渲染树，调用操作系统底层API进行绘图。
渲染
而浏览器渲染的过程主要包括以下五步：
1.浏览器将获取的HTML文档并解析成DOM树。
2.处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
3.将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
4.渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。
5.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting.
浏览器内核
主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
1.渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
2.JS引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
参考链接：https://www.jianshu.com/p/8de32434c180
