JavaScript.Part.3 浏览器进程与线程

第七玩家

已于 2024-08-14 10:05:38 修改

阅读量113

点赞数 2

分类专栏： Web前端基础文章标签： javascript 前端

于 2024-08-14 10:03:04 首次发布

本文链接：https://blog.csdn.net/qq_36975229/article/details/141182924

版权

Web前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 进程和线程

进程和线程是操作系统中用于管理程序执行的基本概念。

进程

定义：进程是一个正在执行的程序的实例，包含程序代码、当前活动（如程序计数器、寄存器内容）和进程的内存空间。
特性：
- 进程是资源分配的基本单位，每个进程都有自己的内存空间。
- 进程之间相互独立，通常通过进程间通信（IPC）进行数据交换。
- 创建和销毁进程的开销较大。

线程

定义：线程是进程中的一个执行单元，多个线程可以共享同一进程的资源（如内存）。
特性：
- 线程是CPU调度的基本单位，线程之间的切换开销较小。
- 同一进程中的线程可以共享数据和资源，便于协作。
- 线程的创建和销毁比进程更高效。

总结

进程是资源分配的基本单位，线程是执行的基本单位。
进程之间相互独立，线程之间共享资源。

2. 浏览器的进程

现代浏览器通常由多个进程组成，其中一些常见的进程包括：

浏览器进程：也称为主进程，负责管理整个浏览器的协调工作，包括用户界面、标签页管理、插件管理等。
渲染进程：每个标签页通常都有一个独立的渲染进程，负责将网页内容解析、布局和绘制到屏幕上。
插件进程：如果网页使用了插件（如Flash、PDF阅读器等），浏览器会为插件创建独立的进程，以增加安全性和稳定性。
GPU进程：负责处理图形渲染任务，将渲染进程生成的图像绘制到屏幕上，以提高性能和图形处理能力。
网络进程：负责处理网络请求和数据传输，与服务器通信并下载网页内容。

这只是一些常见的进程，具体的进程架构可能因浏览器的不同而有所差异。多进程架构的设计可以提高浏览器的安全性、稳定性和性能。

3. 渲染进程(前端关注的重点)

浏览器的渲染进程是多线程的。浏览器渲染进程中的主要线程：

GUI渲染线程：
- 功能：负责渲染浏览器页面，解析 HTML、CSS，构建 DOM 树、CSSOM 树，并进行布局和绘制页面。
- 作用：当界面需要重绘或由于某种操作引发回流（重排）时，该线程会执行。GUI 渲染线程与 JS 引擎线程是互斥的，当 JS 引擎执行时，GUI 渲染线程会被挂起，GUI 更新被保存在一个队列中，等待 JS 引擎空闲时立即执行。
JS引擎线程：
- 功能：处理 JavaScript 脚本程序，解析 JavaScript 脚本，运行代码。
- 作用：JS 引擎线程一直等待着任务队列中的任务到来，然后加以处理。在一个 Tab 页（渲染进程）中，无论什么时候都只有一个 JS 引擎线程在运行 JS 程序。GUI 渲染线程与 JS 引擎线程的互斥关系意味着，如果 JS 执行时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。
事件触发线程（Event Trigger Thread）：
- 功能：控制事件循环，处理异步事件，如用户交互、网络请求完成、定时器到期等。
- 作用：当 JS 引擎执行代码块或异步请求（如 setTimeout）时，会将对应任务添加到事件触发线程中。当事件符合触发条件时，该线程会把事件添加到待处理队列的队尾，等待 JS 引擎处理。
定时器线程（Timer Trigger Thread）：
- 功能：控制 setTimeout 和 setInterval 等定时器。
- 作用：浏览器定时计数器并不是由 JS 引擎直接计数的，而是通过单独线程来计时并触发定时器。计时完毕后，添加到事件队列中，等待 JS 引擎空闲后执行。
异步HTTP请求线程（Async HTTP Request Thread）：
- 功能：处理异步 HTTP 请求，如 XMLHttpRequest 和 Fetch。
- 作用：当检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放入事件队列中，等待 JS 引擎空闲后执行。

4. 事件循环机制

1. 执行栈（Call Stack）：主线程会依次执行同步任务，这些任务会被压入执行栈中。
1. 事件队列（Event Queue）：当异步事件（如定时器、网络请求、用户输入等）触发时，相应的回调函数会被添加到事件队列中。
1. 事件循环（Event Loop）：事件循环机制会不断检查执行栈是否为空，如果为空则从事件队列中取出一个事件，并将其对应的回调函数压入执行栈中执行。

事件循环机制由JS引擎线程主导，其他线程配合的：

JS引擎线程：
- 主线程负责处理所有的同步任务、执行 JavaScript 代码、更新 DOM 和渲染页面。主线程也是事件循环运行的地方。
- 事件循环机制通过事件队列（Event Queue）管理所有的异步任务。
事件触发线程（Event Trigger Thread）：
- 事件触发线程负责管理异步事件的触发和调度，例如用户输入、鼠标点击、网络请求完成等。
- 当一个异步事件被触发时，事件触发线程会将该事件添加到事件队列中。
定时器线程（Timer Thread）：
- 定时器线程负责管理和触发定时器事件（如 setTimeout 和 setInterval）。
- 当定时器到期时，定时器线程会将定时器回调函数添加到事件队列中。
网络线程（Network Thread）：
- 网络线程负责处理网络请求，例如 XMLHttpRequest 和 Fetch 请求。
- 当网络请求完成时，网络线程会将相应的回调函数添加到事件队列中。