深入理解浏览器多进程架构

深入了解浏览器运行原理

首先要了解一下线程和进程的区别

进程之间是不共享资源和地址空间的,所以不会存在太多的安全问题，而由于多个线程共享着相同的地址空间和资源,所以会存在线程之间有可能会恶意修改或者获取非授权数据等复杂的安全问题。

为什么浏览器是多进程的

如果多个页面共享同一进程，就会造成一个页面崩了，别的页面也会受到影响，用户体验效果不好，所以每个页面是独立的进程，进程之间不存在资源共享。当然，单进程会导致内存占用过大问题。

• 一个tab页面对应着一个独立的进程，因此每个tab页面都有其独立的渲染引擎实例，一个进程里面有很多线程，比如：

• GUI线程，渲染html，当页面发生重绘回流时执行，当js引擎脚本运行时，就处于被挂起的状态，发生页面堵塞。

• js引擎线程，跟GUI是互斥的。

• 定时触发器线程，定时器setInterval与setTimeout所在线程，不在js线程里面，可以结合事件机制综合理解

• 事件触发线程，因为js是单线程的，所以队列中的事件都要排队等待js去处理。

• 异步http请求线程，基于XMLHttpRequest，返回状态发生改变，如果设有回调函数，异步线程就返回的状态变更事件放到js处理队列中等待处理。

谷歌浏览器采用多进程架构模式，这意味着它不是像传统的单进程浏览器那样，在一个进程中运行所有的标签页和插件，而是将不同的任务分配给不同的进程，以提高安全性、稳定性和性能。下面是对谷歌浏览器多进程架构的深入介绍：

1. 主进程（Browser Process）：

• 主进程是浏览器的主要控制中心，负责协调和管理整个浏览器的活动。
• 它负责创建和销毁其他类型的进程，并负责用户界面的显示、处理用户输入、管理标签页、插件、下载等。
• 主进程还负责网络请求和与操作系统进行交互，以及处理各种系统级别的任务。

2. 渲染进程（Renderer Process）：

• 每个标签页都在独立的渲染进程中运行，这样可以确保一个标签页的崩溃不会影响到其他标签页。
• 渲染进程负责解析HTML、CSS和JavaScript，并将网页内容渲染到用户界面上。
• 每个渲染进程都有自己的渲染引擎（如Blink），用于解析和渲染网页内容。

3. 插件进程（Plugin Process）：

• 插件进程负责运行浏览器插件，如Flash Player、PDF阅读器等。
• 将插件运行在独立的进程中可以提高浏览器的稳定性，避免插件崩溃导致整个浏览器崩溃的情况。

4. GPU进程（GPU Process）：

• GPU进程负责处理浏览器中的GPU加速相关任务，如绘制页面、执行动画效果等。
• 通过将GPU相关的任务放在独立的进程中，可以提高页面的渲染速度和性能。

5. 网络进程（Network Process）：

• 网络进程负责处理浏览器的网络请求，包括HTTP请求、HTTPS请求、WebSocket等。
• 将网络请求放在独立的进程中可以提高安全性，并且可以更好地管理和控制网络资源。

举例说明：

当用户打开一个新的标签页时，主进程会创建一个新的渲染进程来加载和显示该标签页的内容。这个渲染进程独立于其他标签页的渲染进程，因此即使其中一个标签页崩溃，其他标签页也不会受到影响。同时，如果用户在一个标签页中运行了一个插件（比如Flash插件），则会单独创建一个插件进程来运行该插件。这样，即使插件崩溃，也不会影响到浏览器的其他部分。这种多进程架构使得谷歌浏览器更加稳定、安全，并且能够更好地利用多核处理器的性能优势。

为什么js引擎线程执行，GUI线程就要被挂起

因为js是可以操作dom的，会导致GUI渲染线程前后得到的元素数据不一致。

Browser进程请求服务端，服务端返回了html资源，这一过程发生了什么，请求原理

1.GUI渲染线程对html进行解析 2.当解析到script标签时，JS引擎解析拿到的js代码，解析script标签就是最先进入执行栈的共任务 3.同上，但是事件队列就被区分为宏任务事件队列task queue，微任务事件队列microtask queue 4.为dom元素，添加事件 => 通过事件触发线程，生成事件监听器（待确认）=> 监听器监听到了用户触发事件的行为之后，将回调函数，推入task queue中 解析到setTimeout或者setInterval定时器代码时 => 通过定时器线程，开启定时任务 => 定时器时间到达之后，会将回调函数推入task queue中 遇到ajax请求 => 通过异步http请求线程，发送http请求 => 服务端返回响应后，会将成功或者失败的回调函数推入task queue中 代码中使用了Promise或者async/await来处理异步 => 处理完成后 => 推入microtask queue中 5.当js执行线程中的代码执行完成之后，首先检查微任务队列头部是否有值，如果存在则将其推入到JS执行栈中执行，直到微任务队列头部为空。 6.如果宿主是浏览器，GUI渲染线程可能会重新渲染页面 7.然后检查宏任务队列头部是否有值，如果存在则将其推入到JS执行栈中执行，直到宏任务队列头部为空。 8.当JS执行线程中的执行栈为空时，事件轮询机制会一直重复4-6这个循环。

从浏览器输入url到显示页面这个过程发生了什么？

将浏览器输入 URL 到显示页面的过程涉及多个步骤，包括 DNS 解析、建立连接、发送请求、服务器处理、接收响应、解析 HTML、渲染页面等。以下是这个过程的详细说明：

1. DNS 解析：

   • 浏览器首先会根据输入的 URL 解析出主机名（例如：www.example.com）的 IP 地址。它会首先检查本地 DNS 缓存，如果没有找到，则会向本地 DNS 服务器发出 DNS 查询请求。

2. 建立连接：

   • 一旦浏览器获得了服务器的 IP 地址，它将尝试建立与服务器的 TCP 连接。这个过程通常涉及三次握手，确保客户端和服务器之间的连接建立成功。

3. 发送请求：

   • 浏览器发送一个 HTTP 请求给服务器，这个请求包含了用户请求的信息，如请求的资源（URL）、请求方法（GET、POST等）、请求头（浏览器信息、cookie等）等。

4. 服务器处理：

   • 服务器接收到请求后，会根据请求的内容进行处理。这可能涉及到从文件系统中读取文件、从数据库中获取数据、执行后端代码等操作。

5. 服务器响应：

   • 服务器处理完请求后，会向浏览器返回一个 HTTP 响应。这个响应包含了请求的资源，以及一些元数据，如响应状态码、响应头（Content-Type、Content-Length等）等。

6. 接收响应：

   • 浏览器接收到服务器的响应后，会开始接收响应的内容。如果响应是一个 HTML 页面，浏览器会逐步接收页面的内容。

7. 解析 HTML：

   • 浏览器开始解析 HTML 文档，构建 DOM 树。在解析过程中，会逐步加载和执行 CSS、JavaScript、图像等资源，并构建相应的 CSSOM 树和 JavaScript 对象模型（JSOM）。

8. 渲染页面：

   • 当 DOM 树和 CSSOM 树构建完成后，浏览器开始将页面内容呈现到屏幕上，这个过程称为渲染。它包括布局（Layout）、绘制（Painting）和合成（Compositing）等步骤，最终呈现出用户可见的页面。

9. 显示页面：

   • 最终，浏览器将渲染好的页面内容显示在用户的屏幕上，用户可以与页面进行交互，如点击链接、填写表单等。

解决js单线程处理问题

web-work是浏览器为了解决js单线程处理问题的，开启多线程处理，work和主线程不在一个上下文环境，是一个独立的线程，无法跟主线程直接通信，无法直接访问window，document等对象，无法读取主线程所在网页的 DOM 对象。但是可以使用navigate和location对象，可以通过XMLHttpRequest对象发出ajax请求。Worker 线程有独立的内存空间，Message Queue，Event Loop，Call Stack 等，线程间通过 postMessage 通信。

最后也是全文最重要的，码字不易，你的鼓励是我码字的动力，欢迎点赞关注加收藏，感谢感谢感谢！