当前位置:首页>行业
浏览器的运行模式
2023-06-22 17:26:48
来源:哔哩哔哩

进程和线程

浏览器中的每一个 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

关键词:

相关文章