浏览器的页面渲染机制

一、前言

1、浏览器常用进程

• ① Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有
  负责浏览器界面显示，与用户交互。如前进，后退等
  负责各个页面的管理，创建和销毁其他进程
  网络资源的管理，下载等
• ② 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• ③ GPU进程：最多一个，用于3D绘制等
• ④ 浏览器渲染进程（浏览器内核），Renderer进程，内部是多线程的，也就是我们每个标签页所拥有的进程，互不影响，负责页面渲染，脚本执行，事件处理等

2、浏览器内核

这就是我们的核心渲染进程Renderer，内部有多个线程，参考上图

• ① 图形用户界面GUI渲染线程

负责渲染浏览器界面，包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

• ② JS引擎线程

JS内核，也称JS引擎，负责处理执行javascript脚本
等待任务队列的任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS引擎在运行JS程序

• ③ 事件触发线程

听起来像JS的执行，但是其实归属于浏览器，而不是JS引擎，用来控制时间循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
当JS引擎执行代码块如setTimeout时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
注意：由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

• ④ 定时触发器线程

setInterval与setTimeout所在线程
定时计时器并不是由JS引擎计时的，因为如果JS引擎是单线程的，如果JS引擎处于堵塞状态，那会影响到计时的准确
当计时完成被触发，事件会被添加到事件队列，等待JS引擎空闲了执行
注意：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms

• ⑤ 异步HTTP请求线程

在XMLH