浏览器渲染页面的底层机制
线程 & 进程
浏览器打开一个页面是开辟一个进程（程序），在这个页面中我们要干很多事情，所以需要分配对个线程去处理这些事前。
- 一个进程中包含一个到多个线程，一个线程同时只能干一件事件
- 浏览器是多线程的
- GUI渲染线程：自上而下渲染页面的过程
- JS引擎线程：渲染和执行JS代码的过程、
- 事件触发线程：事件绑定的时候，会有一个线程去监听事件是否触发，一旦事件触发，这个线程帮我们通知绑定的方法执行
- 定时触发器线程：设置定时器之后，分配一个线程去监听是否到达时间，当到时间后，通知对应的方法执行
- 异步HTTP请求线程：分配一个线程从服务器端获取内容（数据）...
- ...
JS引擎线程
JS是单线程的，因为浏览器只分配一个线程（JS引擎线程）去渲染JS
GUI渲染线程
GUI渲染线程负责渲染浏览器界面HTML元素（浏览器渲染页面）,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的，也就是说被冻结了。
浏览器渲染页面的过程
- 生成‘DOM tree’
- 生成‘CSSOM tree’
- 把生成的‘DOM tree’和‘CSSOM tree’合并在一起，共同创建为‘render tree’渲染树
- 浏览器开始按照‘render tree’进行渲染
浏览器的渲染队里机制
- 在当前上下文中，如果遇到修改DOM样式操作，并不会立即去修改样式，而是先放在“渲染队列”中，然后看后面是否还存在其它修改样式的操作，如果有则继续放在队列中，等待当前上下文执行完毕，会把队列中所有修改样式的操作，一次性执行处理，触发一次DOM重排。
- 如果遇到直到遇到非修改样式的操作（比如：获取元素样式的代码），则直接刷新渲染队列【意思：把现在队列中修改样式的操作，立即执行处理】
