浏览器原理剖析:Chrome架构—一个页面为何有四个进程

目录:
1、问题背景
2、进程和线程
3、多进程浏览器架构
4、未来面向服务的架构


1、问题背景:当我们打开一个Chrome浏览器页面,可以通过更多工具——任务管理器查看当前浏览器启动的进程。这时会发现一个有趣的现象,那就是只打开一个标签页,浏览器却有四个进程在执行中,这是为什么呢?

image.png


2、进程和线程
 在进行深入学习之前,我们得梳理一下进程和线程的概念和关系

1)一个进程就是一个程序的运行实例
2)线程依附于进程存在,需要进程来启动和管理,使用多线程并行处理能提升运算效率
3)进程中的任一线程出错,都会导致整个进程的崩溃
4)进程之间内容相互隔离,但是进程内部的线程之间共享当前进程的数据
5)当一个进程关闭之后,操作系统会回收进程所占用内存

3、多进程浏览器架构
目前主要的两种浏览器架构为单进程浏览器架构和多进程浏览器架构

单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里,这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。如此多的模块集中到一个进程,导致其有致命的三个缺陷:

1)不稳定:早期浏览器需要插件实现Web视频、Web游戏等强大的功能,但是插件十分不稳定,一旦插件出错就会导致整个浏览器崩溃;
2)不流畅:每次只能有一个模块执行,如果一个循环脚本占据了线程,其他如渲染进程就会被阻塞,导致浏览器无响应,变卡顿;
3)不安全:通过更改插件的代码可以获取操作系统的任意资源

早期的多进程浏览器将进程分为了三种进程,进程之间相互隔离

浏览器主进程:负责下载进程、管理进程间通信等
渲染进程:负责解析、渲染和JS代码的执行等
插件进程:单独执行各种插件功能

image.png
通过多进程机制,如何解决上述的几个问题:

不稳定问题:由于进程相互隔离,单个页面或单个进程的崩溃并不会影响其他页面/其他进程
不流畅问题:每个页面有单独的渲染进程,不会相互影响和阻塞
不安全:多进程架构引入了**安全沙箱**的机制,相当于操作系统给进程上了一把锁,进程可以运行,但不能在硬盘上写数据,也不能读取敏感数据

目前的多进程架构,对进程进行进一步的划分,分为几种进程:

浏览器进程:负责界面显示、用户交互等
渲染进程:核心任务是将HTML、CSS和JS渲染成可以用户交互的网页
GPU进程: 实现CSS动画绘制、GPU加速等功能
网络进程:负责页面的网络资源加载
插件进程:负责插件的运行,需要插件进程隔离,以防插件崩溃

虽然解决了之前的问题,但目前的浏览器架构也产生了其他问题:

1)更高资源占用:进程多了对应占用的内存资源也多了
2)更复杂体系结构:各进程模块相互独立,导致架构拓展性差,难以适应新需求

image.png

由此可以回答最初的问题,为何一个标签页能启动四个进程?
答:是因为目前浏览器采用了多进程的架构,而目前的多个进程分类鲜明且相互隔离

4、未来面向服务的架构

未来Chrome 整体架构会朝向现代操作系统所采用的“面向服务的架构” 方向发展,原来的各种模块会被重构成独立的服务(Service),每个服务(Service)都可以在独立的进程中运行,访问服务(Service)必须使用定义好的接口,通过 IPC 来通信,从而构建一个更内聚、松耦合、易于维护和扩展的系统。
目前这还在开发中的阶段,也是我们前端后续需要跟进学习的方向。

20 声望
0 粉丝
0 条评论
推荐阅读
热门前端状态管理方案选择:Redux/Mobx/Recoil
对于前端开发来说,React的状态管理方案选择一直是核心问题之一。由近年的下载量比对图来看,最受欢迎的三种方案依次是Redux、mobx和recoil。本文先浅谈对状态管理的理解,再梳理和比较上述三种最主流的状态管理...

白衣黑月1阅读 1.1k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

20 声望
0 粉丝
宣传栏