浏览器引擎
浏览器引擎：网页浏览器引擎俗称浏览器内核，又叫排版引擎（layout engine）或者渲染引擎（rendering engine），负责对网页语法的解释并渲染页面，将页面的代码转换为最终可见的页面形式，并且决定浏览器如何显示页面的内容以及页面的格式信息。
浏览器渲染过程
关键渲染路径如下：
1、浏览器解析HTML源码，生成DOM树。
- 在DOM树中，每个HTML标签都有一个对应的节点
- DOM树的根节点是documentElement，对应的是html标签
- DOM树在构建的过程中，可能会被CSS或JS的加载而执行阻塞。
- 注释、script、display: none元素会在DOM树中。
2、浏览器解析CSS源码，生成CSSOM树。
- 对CSS中的非法的语法会直接忽略掉。
- 解析HTML和解析CSS可以同时进行。
- 解析CSS与script的执行互斥。
- 解析顺序：浏览器默认设置、用户设置、外联样式、内联样式、html中的style。
3、将DOM树和CSSOM树合并生成渲染树（Rendering Tree）
- 渲染树与DOM树类似，但是不完全对应，
display: none;和head不在渲染树中，visiblity: hidden在渲染树中。 - 渲染树中每一个节点都存储着对应的CSS属性。
4、布局：节点信息计算，即根据渲染树计算每个节点的几何信息。
- 此过程涉及到回流（reflow）
5、绘制：将渲染树上的各个节点绘制到屏幕上。
- 此过程涉及到重绘（repaint）
回流（Reflow）
定义
当渲染树中的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建，这就叫回流。
每个页面至少需要一次回流，就是在页面第一次加载的时候，这个时候是一定会发生回流的，因为要构建渲染树。在回流的时候，浏览器会使渲染树汇总收到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，即重绘。
回流的产生
- 页面第一次渲染，在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
- 浏览器尺寸的改变
- 元素位置和尺寸发生改变
- 新增和删除可见元素
- 内容发生改变（文字数量或图片大小）
- 元素字体大小的变化
- 激活CSS伪类（如:hover）
- 设置style属性
重绘（Repaint）
定义
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、分隔，而不会影响布局的，比如color、background-color，这就叫重绘。
重绘的产生
- visibility、outline、背景色等属性的改变。
回流 VS 重绘
- 回流一定会引起重绘，重绘不一定引起回流。
- 回流会导致渲染树重新计算，开销比重绘大，所以我们要尽量避免回流的产生。
- 字体颜色改变引起重绘，字体大小改变引起回流。
常见避免方法
浏览器解决
1、浏览器维护一个队列，把所有会引起回流、重绘的操作放入这个队列，等队列的操作到一定的数量或者到了一定时间间隔，浏览器就会flush对象，进行一次批处理。这样将多次回流、重绘变成一次回流、重绘。
程序员优化
1、合法书写HTML和CSS：把样式文件（CSS）添加到<head>标签，把脚本（JavaScript）添加到</body>结束前，这样可以防止阻塞的方式。
2、样式集中改变：不要一条一条改变样式，可以通过classMame进行集中改变
3、DOM中的读操作和写操作放在一起，减少在两个读操作之间加入写操作。
4、position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
5、尽量使用transform来做形变和位移。
6、使用window.requestAnimationFrame()、window.requestIdleCallback()这两个方法调节重新渲染。
浏览器引擎分类
浏览器内核主要包括以下三个技术分支：
- 排版渲染引擎
- JavaScript引擎
- 其他
| 浏览器引擎分类 | 开发公司 | 代表浏览器 |
|---|---|---|
| Trident | 微软 | IE系列、360系列 |
| Gecko | 开源项目 | 火狐 |
| Webkit | 开源项目 | Safari（苹果）、Chrome（谷歌）、android默认浏览器 |
| Presto | Opera Software | Opera |
| Blink | Google、Opera开发 | Chrome、Opera |
