「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团队对于技术的不断的创新和进化,给了我启发:

  • 事情不会一下子变完美,循序渐进,逐步完善。
  • 对于像我这样的逐梦者,要勇于拥抱变化,善于追寻技术的发展脚步。
  • 理论的知识确实要辅助更多的理解力,才能吃透它。
目录
相关文章
|
3月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
16天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
117 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
30天前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
2月前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
|
1月前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
2月前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
2月前
|
弹性计算 负载均衡 安全
云端问道-Web应用上云经典架构方案教学
本文介绍了企业业务上云的经典架构设计,涵盖用户业务现状及挑战、阿里云业务托管架构设计、方案选型配置及业务初期低门槛使用等内容。通过详细分析现有架构的问题,提出了高可用、安全、可扩展的解决方案,并提供了按量付费的低成本选项,帮助企业在业务初期顺利上云。
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
296 2
|
3月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。

热门文章

最新文章