浏览器的内核分成两个部分，一个渲染引擎，另一个是JS引擎。不同的浏览器的渲染引擎不同（不同的浏览的内核不同）。
浏览器工作的流程：
1）浏览器解析内容：
HTML/SVG/XHTML，解析这三种文件会生成一个DOM Tree（DOM 树）
CSS,解析CSS，产生了CSS规则树
JavaScript脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。
2）解析结束后，浏览器引擎则通过DOM Tree 和CSS Rule Tree来构建Rendering Tree。
Rendering Tree 不等同于DOM树，比如display：none的内容就不必要放在Rendering Tree中。
CSS的RuleTree则是为了完成匹配并且把CSS Rule附加Rendering Tree上的DOM节点(element)
计算每个element的位置，这就是布局了（Layout）
3）通过调用操作系统的Native GUI的API绘制
构建DOM
浏览器会将HTML文件转换为DOM树，可以细分为：
字节数据 => 字符串 => Token => Node => DOM
浏览器从磁盘或者网络读取HTML的原始字节，根据文件的指定编码（UTF-8）原始字节转化为字符串。（在网络中传输的内容是0和1的字节数据，当浏览器接收到这些字节数据后，会转为为字符串，也就是代码）
把字符串转为Token，比如 、< body>。Token会标识处当前的Token是“文本”或是“开始标签”等这个信息
生成节点对象并且构建DOM，构建DOM和转换Token一起进行，也就是生成一个Token就立刻消耗Token取创建出节点对象。（带有结束标签的Token不会创建节点对象）
构建CSSOM
DOM会捕获页面内容，而浏览器还需要知道页面的内容是如何展示的，这就要构建CSSOM了，与构建DOM的过程类似。浏览器会确定每一个节点的样式是什么，而且这个过程是消耗资源的，因为样式是可以随意设置个某个节点的，也是可以通过继承得到，所以浏览器需要递归CSSOM树，再确定具体元素的具体样式。
CSS匹配HTML元素是一个复杂而且涉及到性能，所以DOM树要小，css尽量使用ID和class。在页面布局中需要分成模块，减少过渡层叠。
Rendering Tree（渲染树）
在生成DOM和CSSOM后，则需要将合成渲染树。但是渲染树并不包括所有的节点和样式信息。只包含需要显示的节点和样式，比如一个节点的样式为display:none，就不需要显示在渲染树中了。
布局与绘制
在浏览器生成渲染树后，会根据渲染树来进行布局（回流）。这个阶段浏览器需要弄清节点在页面中的准确位置和大小。
布局输出的一个‘盒模型’，它准确的捕获元素在视口内的位置和尺寸。布局结束后，浏览器会立即触发Paint Setup 和 Paint 事件，把渲染树转换成为屏幕上的像素。
文章评论