游览器的进程和线程

进程和线程的区别

CPU

计算机的核心，其负责承担计算机的计算任务（可以比喻为一个工厂）。

进程

CPU资源分配的最小单位，是能拥有资源和独立运行的最小单位。（可以比喻为工厂车间，是一个工厂任务的环节）任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。

线程

CPU调度的最小单位，是建立在进程基础上的一次程序运行单位，属于单个的程序执行流，是一个进程中代码的不同执行路线。（可以比喻为一个车间的工人组成的一个个任务小组，不同的执行流，协同完成一个任务）

总述

一个进程中可以拥有多个线程，同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）及一些进程级的资源。虽然不同进程之间也可以通信，不过代价较大。（可以在电脑的任务管理器中查看进程）

浏览器是多进程的

概述

1. 浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu和内存）。
2. 每打开一个Tab页，就创建了一个独立的浏览器进程，每个进程相互独立。（可以在Chrome的任务管理器上验证tab页进程）

多进程的好处

1. 不会因为一个tab页崩溃，导致其他tab页也被影响。
2. 相对于线程，进程之间是不共享资源和地址空间的，所以也不会存在太多的安全问题。

包含的进程种类

• Browser进程——浏览器的主进程，负责协调、主控，只有一个
• 第三方插件进程——每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU进程——最多一个，用于3D绘制等
• 浏览器渲染进程——也就是浏览器内核

Browser进程与渲染进程的通信

1. 如果打开任务管理器，然后打开一个浏览器，就可以看到任务管理器中出现了两个进程，一个是主控进程，一个则是打开Tab页的渲染进程
2. 整个过程如下：

1.Browser进程收到用户请求，首先需要获取页面内容，随后将该任务通过RendererHost接口传递给Render进程。
2.Renderer进程的Renderer接口收到消息，简单解释后，交给渲染线程，然后开始渲染。
3.渲染线程接收请求，加载网页并渲染网页，这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染。
4.当然可能会有JS线程操作DOM（这样可能会造成回流并重绘）
5.最后Render进程将结果传递给Browser进程
6.Browser进程接收到结果并将结果绘制出来

• 如图所示

  
  test.png

游览器内核是多线程的

常驻线程

• GUI 渲染线程——负责渲染浏览器界面，解析HTML，CSS
• JavaScript引擎线程——负责处理Javascript脚本程序
• 定时触发器线程——处理setInterval与setTimeout任务
• 事件触发线程——处理事件消息，控制事件循环
• 异步http请求线程——处理XMLHttpRequest异步请求

线程之间的关系

GUI渲染线程与JS引擎线程互斥

1. 由于js可以DOM，如果在修改这些元素属性同时渲染界面（即JavaScript线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。
2. 因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JavaScript引擎为互斥的关系，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行

js为什么会阻塞页面加载

1. 由于GUI渲染线程与JavaScript执行线程是互斥的关系，当浏览器在执行JavaScript程序的时候，GUI渲染线程会被保存在一个队列中，直到JS程序执行完成，才会接着执行。
2. 因此如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

WebWorker与SharedWorker

• WebWorker——运行在web后台的线程，相当于js引擎向浏览器申请开一个子线程，由浏览器所开的，完全受主线程控制，而且不能操作dom

• SharedWorker——是浏览器所有页面共享的，不能采用与Worker同样的方式实现，因为它不隶属于某个Render进程，可以为多个Render进程共享使用

• WebWorker与SharedWorker本质上就是进程和线程的区别，SharedWorker由独立的进程管理，WebWorker只是属于render进程下的一个线程

参考

• http://www.imweb.io/topic/58e3bfa845e5c13468f567d5
• http://www.cnblogs.com/mininice/p/4298952.html
• https://juejin.im/post/5a6547d0f265da3e283a1df7