浏览器渲染页面的底层机制

线程 & 进程

浏览器打开一个页面是开辟一个进程（程序），在这个页面中我们要干很多事情，所以需要分配对个线程去处理这些事前。

• 一个进程中包含一个到对个线程，一个线程同时只能干一件事件
• 浏览器是多线程的
  • GUI渲染线程：自上而下渲染页面的过程
  • JS引擎线程：渲染和执行JS代码的过程、
  • 事件触发线程：事件绑定的时候，会有一个线程去监听事件是否触发，一旦事件触发，这个线程帮我们通知绑定的方法执行
  • 定时触发器线程：设置定时器之后，分配一个线程去监听是否到达时间，当到时间后，通知对应的方法执行
  • 异步HTTP请求线程：分配一个线程从服务器端获取内容（数据）...
  • ...

JS引擎线程

JS是单线程的，因为浏览器只分配一个线程（JS引擎线程）去渲染JS

GUI渲染线程

GUI渲染线程负责渲染浏览器界面HTML元素（浏览器渲染页面）,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的，也就是说被冻结了。

浏览器渲染页面的过程

1. 生成‘DOM tree’
2. 生成‘CSSOM tree’
3. 把生成的‘DOM tree’和‘CSSOM tree’合并在一起，共同创建为‘render tree’渲染树
4. 浏览器开始按照‘render tree’进行渲染

浏览器的渲染队里机制

• 在当前上下文中，如果遇到修改DOM样式操作，并不会立即去修改样式，而是先放在“渲染队列”中，然后看后面是否还存在其它修改样式的操作，如果有则继续放在队列中，等待当前上下文执行完毕，会把队列中所有修改样式的操作，一次性执行处理，触发一次DOM重排。
• 如果遇到直到遇到非修改样式的操作（比如：获取元素样式的代码），则直接刷新渲染队列【意思：把现在队列中修改样式的操作，立即执行处理】

减少DOM的重排（优化）