扒散红黄绿 看看这抹蓝怎么事儿一(深入浅出chrome架构)

谷歌浏览器的多进程多线程架构

查阅过资料的同学肯定了解过浏览器可以是 一进程多线程 或者 我们一会儿会讲的谷歌浏览器的多进程多线程架构(这里不讨论资源有限的情况) 进程间通过IPC(Mojo)通信。

chrome的进程

谷歌浏览器的进程有以下几个(他们都遵守沙盒模型相互独立):

  • Browser进程:
  • UI进程:控制浏览器的各种UI组件外加类似chrome://settings的页面。网络页面不可跳转到WebUI界面,WebUI界面不能跳转到、请求其他网络页面。
  • 网络进程:主要负责页面的网络资源加载。
  • GPU进程:GPU 进程的使用初衷是为了实现 3D CSS 的效果,只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制,这使得 GPU 成为浏览器普遍的需求。最后,Chrome 在其多进程架构上也引入了 GPU 进程。
  • 插件进程:顾名思义该进程跑运行在各个标签页上的插件。
  • 渲染进程(浏览器内核,内部是多线程的):核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 V8 引擎 都是运行在该进程中。
  • 设备进程:负责与设备(如打印机、摄像头、麦克风等外部设备)进行交互和通信。
  • 存储进程:主要负责处理浏览器的存储功能,包括本地存储、缓存以及其他相关的存储任务。
  • ...

💡想看看自己浏览器页面有哪些进程?ctrl+esc

当地址栏中输入目标url后发生了什么?

1. UI 进程判断来意。

之前在介绍UI进程的时候讲过,chrome://settings页面是UI进程掌管的页面。

所以不是我们在地址栏输入所有内容最后都会发起HTTP请求的。

当用户开始在地址栏中输入内容时,UI 进程询问的第一件事是 "这是搜索查询 还是设置页面 还是 URL?"。

在 Chrome 中,地址栏也是一个搜索输入字段,因此 UI 进程需要解析并决定是将您发送到搜索引擎,还是跳转到WebUI页面,还是发送到请求的站点。


2.UI进程唤起网络进程开始请求

首先浏览器先查看浏览器缓存->系统缓存->路由缓存中是否有该地址的网址页面, 如果有则显示页面的内容, 如果没有则进行下一步进入请求流程。

当浏览器知道了这是一个URL之后,UI 进程会启动网络进程调用获取站点内容。加载微调器显示在选项卡的一角,网络进程程会执行适当的协议,例如 DNS 查找并为请求建立 TLS 连接。

此时,网络进程程可以接收诸如HTTP 301之类的服务器重定向标头。在这种情况下,网络进程与服务器正在请求重定向的UI进程进行通信。然后,将发起另一个URL请求。

3.获取响应

现在请求发出去了,服务端理论上就会给我们一些反馈(这里已经是if 301的else分支啦)。一旦响应主体(有效负载)开始进入,网络进程就会在必要时查看流的前几个字节。响应的 Content-Type 标头应该说明它是什么类型的数据,但由于它可能丢失或错误,因此MIME 类型嗅探是在此处完成的。正如源代码中所评论的那样,这是一件"棘手的事情" 。

好,现在已经拿到响应的 Content-Type 了,如果这个 Content-Type 是最常见的值 HTML 的话就交给下一步 Renderer 渲染进程进行处理。如果是.zip/.mp4....的文件类型,则交由download manager进行下载任务(不过听说最近这玩意儿归渲染引擎管了)

这也是安全检查发生的地方。如果域和响应数据似乎与已知的恶意站点匹配,则网络进程会发出警报以显示警告页面。此外,还会进行跨源读跨域信息拦截以确保敏感的跨站点数据不会进入渲染器进程(这也是大部分前端小白遇到的第一个比较棘手的问题 如何解决跨域问题)


4.render进程唤起WebUI进程进行渲染

一旦完成所有检查并且网络线=进程确信浏览器应该导航到所请求的站点,网络进程就会告诉 UI 进程数据已准备好。UI进程就会找到渲染进程来进行网页的渲染。

由于网络请求可能需要数百毫秒才能得到响应,因此chrome对此进行了加速优化。当 UI 进程在步骤 2 中向网络进程发送 URL 请求时,它已经知道要导航到哪个站点。UI 进程会尝试在网络请求的同时主动查找或启动渲染器进程。这样,如果谢天谢地的话,那么当网络进程接收到数据时,渲染器进程就已经处于就绪状态。如果导航重定向跨站点,则可能不会使用此备用进程,在这种情况下可能需要重开渲染进程。

5.提交导航 现在数据和渲染器进程已准备就绪,IPC 从浏览器进程发送到渲染器进程以提交导航。它还传递数据流,以便渲染器进程可以继续接收 HTML 数据。一旦浏览器进程听到渲染器进程中已发生提交的确认,导航就完成并且文档加载阶段开始。

此时,地址栏已更新,安全指示器和站点设置 UI 反映了新页面的站点信息。该选项卡的会话历史记录将更新,因此后退/前进按钮将逐步浏览刚刚导航到的站点。为了在关闭选项卡或窗口时方便恢复选项卡/会话,会话历史记录将存储在磁盘上。

至此,单次从请求到渲染的全过程就完成了。

总结: 对浏览器进程而言 从输入url开始按回车之后主要分以下三步:

1、UI 进程判断来意

2、UI 进程唤起网络进程开始请求

3、获取响应

4、render 进程唤起 UI 进程进行渲染

5、提交导航

由于篇幅有点长了,render 的具体细节就下次一定~

引用:

相关推荐
qq_3901617725 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js