重学浏览器(1)-多进程多线程的浏览器

浏览器是我们上网的一个重要工具,是我们重要的信息来源,这里以Chrome浏览器为对象,同时作为一名前端工程师,之前对于浏览器的认知还不够深入,所以借着这一系列的文章,进行浏览器的逐步分析与学习,加深自己的知识储备。同时这部分知识也是做页面性能优化,健康度监控等工具时所必须的基础知识。

进程和线程

  • 进程是系统内存分配的一小部分内存空间
  • 进程之间相互独立(不同进程之间可以相互通信,不过代价很大)
  • 进程由单个或多个线程组成
  • 多个线程之间是可以相互协作完成工作的
  • 同一个进程中各个线程之间共享同一块内存空间

    多进程浏览器


    chrome浏览器使用的是多进程多线程模式,因为现在的网页复杂性非常高。如果整个浏览器是单进程的,有可能某个page界面的抛错就会导致整个浏览器的crash。同时多个界面互相可以访问相同的内存和相同的执行环境,安全性也是一个大的问题,所以浏览器需要采用多进程模式。

浏览器的进程大概分为以下这几种:

  • 1,浏览器主进程(Browser进程):控制chrome的地址栏,书签栏,返回和前进按钮,同时还有浏览器的不可见部分,例如网络请求和文件访问
  • 2,第三方插件进程:每种插件一个进程,插件运行时才会创建
  • 3,浏览器渲染进程(浏览器内核,内部是多线程的):负责界面渲染,脚本执行,事件处理等
  • 4,GPU进程:最多一个,用于3D绘制

同时,浏览器中的每一个frame框也都是一个独立的进程,因为浏览器的安全策略中,来自不同源的界面,在没有授权前不可以访问另一个界面的数据。同时给不同源的界面分配不同的进程可以有效的实现这一效果。

浏览器内核

浏览器内核是通过取得页面内容,整理信息,计算和组合最终输出可视化的图像结果,通常也被视为浏览器渲染进程。Chrome浏览器为每个Tab页面单独启用进程,因此每个tab网页都有其独立的渲染引擎实例。有些渲染进程会被浏览器自己的优化机制进行合并。

浏览器内核是多线程的

  • GUI线程

    负责渲染浏览器界面,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行,当界面需要重绘或由于某种操作引发的reflow时,该线程就会执行。

  • js引擎线程

    也称为JS内核,负责处理JavaScript脚本程序,JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页中无论什么时候都只有一个JS线程在运行JS程序

  • 定时触发器线程 (多个定时器时是否会有多个定时触发线程)

    传说中的setInterval与setTimeout所在线程, 计数线程,浏览器定时计数器并不是由JS引擎计数的。

  • 事件触发线程

    属于浏览器而不是JS引擎,当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中。当对应的事件符合触发条件被触发时,该线程会把是事件添加到待处理队列的队尾,等待JS引擎的处理。

  • 异步http请求线程

    XMLHttpRequest在连接后是通过浏览器新开的一个线程请求。当检测到状态更新时,如果没有设置回调函数,异步线程就产生状态 变更事件,将这个回调再放入事件队列中,等待JS引擎执行。

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

浏览器内核的主要目标是将html+css+js渲染成开发者预期的UI,

Browser进程和浏览器内核通信过程

经过上边的各个概念的讲解,我们已经对浏览器是多进程多线程的概念有了大致的认知,下边我们看下浏览器的架构多进程的互相协作,首先引用一张架构图

每个渲染进程都有一个全局renderprocess对象来管理和主进程的通信并维护全局状态。浏览器为每一个渲染进程都维护一个相应的RenderProcessHost,来管理主进程和渲染进程之间的状态以及沟通。主进程和渲染进程的通讯使用的是 Chromium的 IPC 系统。

每个渲染进程中,都有一个或多个renderview对象,由RenderProcess来管理,对应于每个tab页中的内容。RenderProcess负责tab页中所有发生的事情,其中主线程处理我们发送给用户的大部分代码,当然也会有web worker或者service worker处理一部分js代码。大概的模式可看我们之前介绍的浏览器内核。

总结

本片文章大概介绍了下chrome浏览器的多进程和多线程架构,同时介绍了该架构的优点以及浏览器内核的多线程模型。那么在接下来的一篇中,我们会去详细的介绍下浏览器多进程多线程架构中,不同进程之前的协作方式。

参考引用文章:

https://www.chromium.org/developers/design-documents/multi-process-architecture

https://segmentfault.com/a/1190000012925872

https://developers.google.com/web/updates/2018/09/inside-browser-part1

posted @ 2019-06-29 17:46 学习会让你青春永驻 阅读(...) 评论(...) 编辑 收藏