理解浏览器的进程与线程

• Chrome架构：仅仅打开了1个页面，为什么有4个进程
• 区分进程与线程
• 浏览器是多进程的
• 浏览器的渲染进程是多线程的
• 多标签之间怎么通信

Chrome架构

-仅仅打开了1个页面

区分进程与线程

• 线程和进程都是 cpu 工作时间片的一个描述
• 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
• 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程)

一辆火车可以有多个车厢，单纯的车厢无法运行

• 不同进程之间也可以通信(传递数据)，不过代价较大 - 进程通信管道IPC机制

相当于一辆火车上的乘客很难换到另外一辆火车，比如站点换乘

• 进程中的任意一线程执行出错，都会导致整个进程崩溃

一列火车上中间的一节车厢着火了，将影响到所有车厢

• 进程间互不影响

一列火车不会影响到另外一列火车

• 当一个进程关闭之后，操作系统会回收该进程的内存空间

浏览器是多进程的

浏览器有五种进程：1个浏览器进程，1个GPU进程，1个网络进程，多个渲染进程，和 多个插件进程

• 浏览器进程： 负责控制浏览器除标签页外的界面，包括地址栏、书签、前进后退按钮等，以及负责与其他进程协调工作，同时提供存储功能
• GPU进程：负责整个浏览器界面渲染。Chrome刚开始发布的时候是没有GPU进程的，而使用GPU的初衷是为了实现3D CSS效果，只是后面网页、Chrome的UI界面都用GPU来绘制，这使GPU成为浏览器普遍的需求，最后Chrome在多进程架构上也引入了GPU进程
• 网络进程：负责发起和接受网络请求，以前是作为模块运行在浏览器进程一时在面的，后面才独立出来，成为一个单独的进程
• 插件进程：主要是负责插件的运行，因为插件可能崩溃，所以需要通过插件进程来隔离，以保证插件崩溃也不会对浏览器和页面造成影响
• 渲染进程：负责控制显示tab标签页内的所有内容，核心任务是将HTML、CSS、JS转为用户可以与之交互的网页，排版引擎Blink和JS引擎V8都是运行在该进程中，默认情况下Chrome会为每个Tab标签页创建一个渲染进程
  

浏览器的渲染进程是多线程的

• GUI渲染线程：负责渲染页面，解析html和CSS、构建DOM树、CSSOM树、渲染树、和绘制页面，重绘重排也是在该线程执行
  • 当界面需要重绘回流时，该线程就会执行
  • 当JS引擎执行时，GUI线程会被挂起(冻结)，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
• JS引擎线程：一个tab页中只有一个JS引擎线程(单线程)，负责解析和执行JS。
  • 它GUI渲染进程不能同时执行，只能一个一个来，如果JS执行过长就会导致阻塞掉帧
• 计时器线程：指setInterval和setTimeout，
  • 因为JS引擎是单线程的，所以如果处于阻塞状态，那么计时器就会不准了，所以需要单独的线程来负责计时器工作
  • 当JS引擎空闲时才会去执行
  • W3C规定要求setTimeout中低于4ms的时间间隔算为4ms
  • 不是由js引擎计数，阻塞线程状态就会影响记计时的精度
• 异步http请求线程： XMLHttpRequest连接后浏览器开的一个线程，比如请求有回调函数，异步线程就会将回调函数加入事件队列，等待JS引擎空闲执行
• 事件触发线程：主要用来控制事件循环，
  • 比如JS执行遇到计时器，AJAX异步请求等，就会将异步任务添加到事件触发线程中，在对应事件触发时，就把事件添加到待处理队列的队尾，等JS引擎处理

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

多标签之间怎么通信

• localStorage：在一个标签页监听localStorage的变化，然后当另一个标签页修改的时候，可以通过监听获取新数据

window.addEventListener('storage',  (e) => { ... })

• WebSocket：全双工通信，因为websocket可以实现实时服务器推送，所以服务器就可以来当这个中介者。标签页通过向服务器发送数据，然后服务器再向其他标签推送转发
• postMessage：

// 发送方
window.parent().pastMessage('发送的数据','http://接收的址')
// 接收方
window.addEventListener('message',(e)=>{ let data = e.data })

参考

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

深入理解浏览器中的进程与线程