浏览器

1.浏览器架构

单进程浏览器时代

单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里，这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。其实早在 2007 年之前，市面上浏览器都是单进程的

• 缺点

• • 不稳定：一个插件的意外崩溃会引起整个浏览器的崩溃
  • 不流畅：所有页面的渲染模块、JavaScript执行环境以及插件都是运行在同一个线程中的，这就意味着同一时刻只能有一个模块可以执行
  • 不安全：可以通过浏览器的漏洞来获取系统权限，这些脚本获取系统权限之后也可以对你的电脑做一些恶意的事情，同样也会引发安全问题

• 以上这些就是当时浏览器的特点，不稳定，不流畅，而且不安全

多进程浏览器时代

最新的Chrome浏览器包括：1个浏览器（Browser）主进程、1个 GPU 进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程

• 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
• 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎Blink和JavaScript引擎V8都是运行在该进程中，默认情况下，Chrome会为每个Tab标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
• GPU进程。其实，Chrome刚开始发布的时候是没有GPU进程的。而GPU的使用初衷是为了实现3D CSS的效果，只是随后网页、Chrome的UI界面都选择采用GPU来绘制，这使得GPU成为浏览器普遍的需求。最后，Chrome在其多进程架构上也引入了GPU进程。
• 网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
• 插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响

2.JavaScript单线程模型

表现

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事，前面的任务没做完，后面的任务只能等着。

Why？

• 这主要与JavaScript用途有关。它的主要用途是与用户互动，以及操作DOM。如果JavaScript是多线程的，会带来很多复杂的问题，假如 JavaScript有A和B两个线程，A线程在DOM节点上添加了内容，B线程删除了这个节点，应该是哪个为准呢? 所以，为了避免复杂性，所以设计成了单线程。
• 虽然 HTML5 提出了Web Worker标准。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。但是子线程完全受主线程控制，且不得操作DOM。所以这个并没有改变JavaScript单线程的本质。一般使用 Web Worker 的场景是代码中有很多计算密集型或高延迟的任务，可以考虑分配给 Worker 线程。
• 但是使用的时候一定要注意，worker 线程是为了让你的程序跑的更快，但是如果 worker 线程和主线程之间通信的时间大于了你不使用worker线程的时间，结果就得不偿失了。

浏览器内核中线程之间的关系

• GUI渲染线程和JS引擎线程互斥

• • js是可以操作DOM的，如果在修改这些元素的同时渲染页面（js线程和ui线程同时运行），那么渲染线程前后获得的元素数据可能就不一致了。

• JS阻塞页面加载

• • js如果执行时间过长就会阻塞页面

浏览器是多进程的优点

• 默认新开 一个 tab 页面 新建 一个进程,所以单个 tab 页面崩溃不会影响到整个浏览器。
• 第三方插件崩溃也不会影响到整个浏览器。
• 多进程可以充分利用现代 CPU 多核的优势。
• 方便使用沙盒模型隔离插件等进程,提高浏览器的稳定性

进程和线程又是什么呢

进程（process）和线程（thread）是操作系统的基本概念。

• 进程是 CPU 资源分配的最小单位（是能拥有资源和独立运行的最小单位）。
• 线程是 CPU 调度的最小单位（是建立在进程基础上的一次程序运行单位）。

理解

由于每个进程至少要做一件事,所以一个进程至少有一个线程。系统会给每个进程分配独立的内存,因此进程有它独立的资源。同一进程内的各个线程之间共享该进程的内存空间（包括代码段,数据集,堆等）。

进程可以理解为一个工厂不不同车间，相互独立。线程是车间里的工人，可以自己做自己的事情,也可以相互配合做同一件事情。

3.Chrome 打开一个页面需要启动多少进程？分别有哪些进程？

打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个；最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。

• 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
• 渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
• GPU 进程：其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
• 网络进程：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
• 插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

4.浏览器存储

存储类型	说明	存储容量	持久性	使用场景
LocalStorage	存储数据在客户端，不会随浏览器关闭而消失。	5MB 或更大	永久存储，直到手动删除	适合存储不敏感且需要长期保存的数据，如用户偏好设置、会话信息等。
SessionStorage	存储数据在一个会话中，浏览器关闭后会清除。	5MB 或更大	会话结束时删除	适合存储临时数据，如页面状态、单个会话的数据等。
Cookies	存储在浏览器中，数据包含在 HTTP 请求头中。	4KB	存储期限可配置，默认是会话级别	适合存储小型数据，如用户认证信息、跟踪标识符等。
IndexedDB	浏览器中的 NoSQL 数据库，支持存储结构化数据。	大小可配置（通常受磁盘空间限制）	长期存储，直到手动删除	适合存储大量的结构化数据，如用户上传的文件、表单数据、离线缓存等。
WebSQL	已废弃，浏览器中的关系型数据库。	大小可配置	长期存储，直到手动删除	适合存储结构化数据，已被 IndexedDB 替代，现代浏览器不再支持。

应用场景	描述	存储技术
模型推理	将训练好的深度学习模型存储在浏览器中，通过 IndexedDB 存取以进行推理	IndexedDB, LocalStorage
离线学习	在浏览器中实现离线学习功能，将用户的数据存储在 LocalStorage 或 IndexedDB 中，进行本地训练	IndexedDB, LocalStorage
数据预处理	存储用户输入的数据并进行预处理，以供后续的深度学习模型使用	LocalStorage, SessionStorage
模型存储与加载	将深度学习模型存储到浏览器中，以便下次加载使用	IndexedDB, LocalStorage

存储类型	安全性	性能	适用性
LocalStorage	不支持跨域存取，易受 XSS 攻击。	读取速度较快，但容量有限。	用于轻量数据存储，避免存储敏感信息。
SessionStorage	与 LocalStorage 相同，但会话结束时清除。	与 LocalStorage 类似。	用于存储会话级数据。
Cookies	容易受到 CSRF 攻击，数据加密需额外处理。	网络请求时随每次请求发送，性能开销较大。	用于认证与会话管理。
IndexedDB	提供更强的安全性与隔离性，支持多种数据类型。	适合存储大量结构化数据，性能较好。	用于大数据存储和离线应用。
WebSQL	已废弃，安全性较低。	性能较好，但已不再被现代浏览器支持。	仅在旧浏览器或项目中使用。