「web浏览器」从一张进程截图说起,总结了一波Chrome架构知识点

简介: 本文从一张进程截图说起,总结了一波Chrome架构知识点。

出发前

最近撸学习浏览器原理,以前因为实际使用频率低、内容较难、鸵鸟心理等原因,有点刻意避开这块知识。

最近,心态被调整了,感觉还挺有信心撸平这块知识的。(希望接下来不会被打脸)

一张Chrome任务管理器的截图

我打开Chrome的一个空白的页面,然后从设置>更多工具中找到任务管理器并打开,下面就是我的浏览器的任务管理器截图:

看到这个截图的时候,我有点惊讶。我就开了一个页面,怎么这么多进程?这么多进程会不会导致内存消耗过高?

于是我开启了我的学习之旅。

多进程架构

目前Chrome的多进程架构如下:


进程介绍

进程名称

数量/个

进程介绍

浏览器主进程

1

负责子进程管理、操作界面的显示、用户的交互。

网络进程

1

负责网络资源加载。

GPU 进程

1

负责3D效果、动画、图片等渲染。

渲染进程

N

负责将 HTML、CSS 和 JavaScript 转换成用户可以交互的操作界面。

默认情况下,每个Tab都会被创建一个渲染进程。且渲染进程运行在沙箱模式下。

插件进程

N

负责插件的运行和隔离。

隔离插件主要是防止出现单个插件崩溃导致页面或者浏览器崩溃的情况。

缓存进程(Storage Service

1

负责提供浏览器存储等功能。

它是从浏览器主进程中分离出来的服务。

音频进程(Audio Service)

1

负责处理音频、频。

解答截图下面的问题

了解了Chrome的多进程架构,也就大致明白了,前面提到的问题。

为什么即便打开一个空白页面,会有多个进程?

Chrome采用多进程架构。

首先会有浏览器主进程、网络进程、GPU 进程、缓存进程、多插件进程、缓存进程

默认情况下每个Tab还会被创建一个渲染进程。

如果Tab中有音频、视频,还会有一个音频进程。

同时打开这么多进程会不会导致内存消耗过高?

前面提到的这些进程,其实都会包含公共的基础内容,比如JavaScript的运行环境。同时打开多个进程,是会消耗更多的内存资源的。

多进程架构是终点吗?

那肯定不是,因为它仍然存在高消耗、高复杂度的问题。

Chrome团队早在 2016 年,就已经使用“面向服务的架构”( SOA)的思想设计了新的 Chrome架构。

该架构的设计是,每个模块都会是一个独立的服务,每个服务都在独立的进程中运行,访问服务时必须使用定义好的接口,需要使用 IPC 来通信。

该架构的特点是,高内聚、低耦合、更易扩展、更易维护。

笔记时刻 📒

学习过程中,除了上面的总结,几个学习到的知识点,记下摸索笔记📒。

1、内嵌iframe

如果页面内嵌了 iframe,iframe页面会在一个单独的进程中。

2、往返缓存策略

我在任务管理器里面发现了一个叫做往返缓存版页面的名称。于是顺手查了一下这个知识点。

主要作用是,当用户点击后退或前进按钮时,可以瞬时加载页面。(我理解是属于缓存性质的优化方案)。

详细内容可以看这篇文章浏览器往返缓存--back-forward cache(bfcache)

过往探索

最早浏览器是单进程的,如果进程中某个线程出错,整个进程都会崩溃,进而导致浏览器崩溃。(有点塔罗牌的既视感)

Chrome引入多进程架构,帮助解决了单进程时代的一些问题。早期的多进程,只有浏览器主进程、渲染进程、插件进程三个。浏览器主进程承担了很多工作。(这块描述如果有误欢迎指出)

随着Chrome创新和进化,进程从功能上被细分成了多项,也就发展成了前面图片所示的多进程架构。

旅行总结

Chrome团队对于技术的不断的创新和进化,给了我启发:

  • 事情不会一下子变完美,循序渐进,逐步完善。
  • 对于像我这样的逐梦者,要勇于拥抱变化,善于追寻技术的发展脚步。
  • 理论的知识确实要辅助更多的理解力,才能吃透它。
目录
相关文章
|
5月前
|
Web App开发 iOS开发
Web 浏览器
【8月更文挑战第27天】Web 浏览器。
67 2
|
2月前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
71 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
2月前
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
36 1
|
5月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
78 1
|
5月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
93 0
|
6月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
|
6月前
|
机器人 Shell 开发者
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
5月前
|
Web App开发 人工智能 iOS开发
灵办AI助手Chrome插件全面评测:PC Web端的智能办公利器
《灵办AI助手:Mac OS下的高效办公利器》 灵办AI助手是一款专为提升工作效率而设计的浏览器插件,适用于Chrome、Edge等主流浏览器,在Mac OS系统中表现尤其出众。本文将深入评测其核心功能,包括网页翻译、AI对话、AI阅读及代码辅助等,展示如何在实际工作中运用这些功能来提升效率。此外,文中还提供了详细的安装与设置指南,帮助读者轻松上手这款办公神器。无论你是学生、职场人还是开发者,灵办AI助手都能成为你提高生产力的理想选择。
154 0
|
5月前
|
存储 移动开发 编解码
一文读懂Web Codecs API:浏览器背后的媒体魔术师
一文读懂Web Codecs API:浏览器背后的媒体魔术师
54 0
|
6月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问