浏览器

浏览器包含以下进程（仅列举主要进程）

1. Browser进程：浏览器的主进程（负责协调、主控），只有一个。
   作用：
   1.负责浏览器界面显示，与用户交互。如前进，后退等。
   2.负责各个页面的管理，创建和销毁其他进程
   3. 将Renderer进程得到的内存中的Bitmap，绘制 到用户界面上
   4.网络资源的管理，下载等

2. **第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建（如VUE在Chrome上的插件）

3. GPU进程：最多一个，用于3D绘制等

4. 浏览器渲染进程（Renderer）：默认每一个Tab页面一个进程，互不影响（空白页会合并进程）。作用：
   页面渲染，脚本执行，事件处理

浏览器多进程的优势

避免单个页面崩溃或者插件崩溃影响到其它页面；利用多核优势

渲染进程

1. GUI渲染线程
   解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制（GUI渲染线程和JS引擎线程为互斥关系，避免页面元素的不确定性）
2. JS引擎线程
   处理JS脚本程序（解析，运行）
3. 事件触发线程
   归属于浏览器，用来控制事件循环。当对应事件符合条件触发时，会将该事件添加到待处理队列的队尾，等待JS引擎的处理（JS引擎空闲时）
4. 定时触发器线程
   处理setInterval和setTimeout
5. 异步HTTP请求线程
   在XMLHttpRequest在连接后通过浏览器新开的一个线程

2084336019-5a65972413011_articlex.png

浏览器渲染流程

1.解析HTML简历DOM树
2.解析CSS简历render树（将CSS解析成树状的数据结构，再和DOM树结合成render树）
3.布局render树（layout|reflow），负责元素尺寸、位置的计算
4.绘制render树（paint），绘制页面
5.浏览器会将各层的信息发给GPU来进行页面显示

1373095523-5a658fc12f1fd_articlex.png

---

css加载不会阻塞DOM树解析，但会阻塞render树的渲染（render树需要css信息）

JS运行机制

1.JS分为同步任务和异步任务
2.同步任务都在主线程上运行，形成一个执行栈
3.主线程之外，事件触发线程管理一个任务队列。只要异步任务有了运行结果，就在任务队列中放置一个事件
4.一旦执行栈中的所有同步任务执行完毕，系统会读取任务队列，将可运行的异步任务添加到可执行栈中开始执行

3521345917-5a659722efdc2_articlex.png

EventLoop

1103131299-5a659722e7a98_articlex.png

学习于https://segmentfault.com/a/1190000012925872