进程和线程

浏览器中的每一个 Tab 页面就是一个主进程；

进程就是程序运行的资源上下文实例，占据独立的内存空间；可以在进程中再次开辟内存执行线程，这些线程共享一定的资源；

浏览器中的主进程（1/5）

负责控制浏览器除标签页外的界面，包括地址栏、书签、前进后退按钮等，以及负责与其他进程的协调工作，同时提供存储功能

(资料图)

浏览器中的GPU进程（2/5）

负责整个浏览器界面的渲染。Chrome刚开始发布的时候是没有GPU进程的，而使用GPU的初衷是为了实现3D CSS效果，只是后面网页、Chrome的UI界面都用GPU来绘制，这使GPU成为浏览器普遍的需求，最后Chrome在多进程架构上也引入了GPU进程

浏览器中的网络进程（3/5）

负责发起和接受网络请求，以前是作为模块运行在浏览器进程一时在面的，后面才独立出来，成为一个单独的进程

浏览器中的多个渲染进程（4/5）

负责控制显示tab标签页内的所有内容，核心任务是将HTML、CSS、JS转为用户可以与之交互的网页，默认情况下Chrome会为每个Tab标签页创建一个渲染进程：

1. GUI渲染线程：负责渲染浏览器界面（DOM Tree \ Css Tree => Render Tree）然后计算布局并绘制。最后加载异步资源（视频图片css等）

当修改布局（修改大小、位置、内容）时，会引起较大成本的回流

非布局修改会引起重绘

2. JS线程：逐行解析和执行收到的 Javascript 代码。维护一个异步事件队列。当执行 DOM事件定时器网络请求 时将会推入到异步队列，并唤起事件触发线程

异步队列包含宿主发起的宏任务（DOM/定时器/网络请求）JavaScript自身发起的微任务（Promise / MutaionObserver DOM更新监听等）；只有宏/同步线程任务才会导致微任务，一定会清空导致微任务后，才会开始下一个宏任务

3. 事件触发线程：不断得访问事件队列的头部，并将该函数推到执行栈中并立即执行4. 定时器触发线程5. 网络请求线程

1. GUI渲染线程：负责渲染浏览器界面（DOM Tree \ Css Tree => Render Tree，计算布局并绘制），包括界面的小成本重绘（非布局）时或者较大开销的回流（布局）、加载异步资源（视频图片css等）2. 唯一JS主线程：逐行解析和执行收到的 Javascript 代码。维护一个异步事件队列。当执行 DOM事件定时器网络请求 时将会推入到异步队列，并唤起事件触发线程3. 事件触发线程：不断得访问事件队列的头部，并将该函数推到执行栈中并立即执行4. 定时器触发线程5. 网络请求线程

浏览器中的多个插件进程（5/5）

主要是负责插件的运行，因为插件可能崩溃，所以需要通过插件进程来隔离，以保证插件崩溃也不会对浏览器和页面造成影响

参考文章

《深入理解浏览器中的进程与线程》 by 沐华  

https://juejin.cn/post/6991849728493256741

标签：