当前位置：首页 > news >正文

前端进程和线程及介绍

news 来源：原创 2025/6/10 2:45:26

前端开发中经常涉及到进程和线程的概念，特别是在浏览器中。理解这两个概念对于理解浏览器的工作机制和前端性能优化非常重要。以下是详细介绍：

1. 什么是进程和线程？

进程：
- 是操作系统分配资源的基本单位。
- 一个程序启动后，操作系统会为其创建一个进程，分配内存空间、CPU时间片等资源。
- 每个进程可以包含多个线程。
- 进程之间是相互独立的，通常通过进程间通信（IPC）进行数据交换。
线程：
- 是进程中的一个执行单元，是程序执行的最小单位。
- 一个进程可以有多个线程，这些线程共享进程的内存空间和资源。
- 多线程可以实现并发执行，提高程序的执行效率。

2. 浏览器的多进程架构

现代浏览器（如 Chrome、Edge）采用多进程架构，以提高稳定性、安全性和性能。以下是常见的浏览器进程：

主进程（Browser Process）：
- 管理浏览器的核心功能，如地址栏、书签、浏览器UI、进程管理等。
- 负责与操作系统交互。
渲染进程（Renderer Process）：
- 每个标签页通常对应一个独立的渲染进程（默认隔离）。
- 主要负责 HTML、CSS、JavaScript 的解析与渲染，以及用户交互。
- 渲染进程运行在沙盒环境中，具有较低权限，增强安全性。
GPU进程（GPU Process）：
- 专门负责 GPU 的任务，如图形渲染和加速。
- 提高了页面渲染性能，尤其是在 3D 渲染和硬件加速场景中。
网络进程（Network Process）：
- 独立处理网络请求，如加载资源、HTTP 请求等。
- 确保网络操作与渲染操作隔离，增强稳定性。
插件进程（Plugin Process）：
- 处理浏览器中的插件（如 Flash 等）。
- 每个插件运行在独立的进程中，防止崩溃影响浏览器的其他部分。

3. 渲染进程中的线程模型

在渲染进程中，还有多种线程协作完成任务：

GUI 渲染线程：
- 负责页面的布局和绘制。
- 当 JavaScript 执行时，GUI 渲染线程会被阻塞，直到 JavaScript 执行完成（单线程机制）。
JavaScript 引擎线程：
- 负责解析和执行 JavaScript 代码（如 V8 引擎）。
- JavaScript 是单线程运行的（即同一时间只能执行一个任务）。
事件触发线程：
- 管理用户交互事件（如鼠标点击、键盘输入）。
- 当事件发生时，将其加入 JavaScript 的任务队列，等待 JavaScript 引擎线程处理。
定时器线程：
- 负责管理 setTimeout、setInterval 的计时任务。
- 计时完成后，将回调函数加入任务队列。
异步 HTTP 请求线程：
- 管理浏览器中的异步请求（如 XMLHttpRequest、Fetch）。
- 请求完成后，将回调加入任务队列。

4. 前端中的单线程与异步机制

JavaScript 是单线程的

JavaScript 采用单线程模型，是为避免多线程操作 DOM 引起的复杂问题。
单线程通过事件循环（Event Loop）机制实现异步操作，如处理网络请求、定时器、DOM 事件等。

事件循环（Event Loop）

宏任务（Macro Task）：如 setTimeout、setInterval、I/O 操作。
微任务（Micro Task）：如 Promise.then、MutationObserver。

任务执行顺序：

执行当前任务栈中的代码。
执行所有微任务。
执行一个宏任务（从任务队列中取出）。

5. 性能优化建议

减少主线程阻塞：
- 避免长时间运行的 JavaScript 脚本。
- 使用 Web Worker 将复杂计算移到单独的线程。
异步加载资源：
- 使用 async 或 defer 属性加载外部脚本。
- 避免阻塞渲染。
使用 GPU 加速：
- 利用 CSS3 特性（如 transform、opacity）触发 GPU 加速。
优化 DOM 操作：
- 减少 DOM 操作的频率，合并多次操作。
合理使用事件和计时器：
- 避免频繁触发高开销的事件（如 scroll、mousemove）。
- 使用防抖和节流（debounce/throttle）技术。

希望这些内容能帮助你更好地理解前端的进程和线程！如果有具体问题，欢迎随时提问。

前端进程和线程及介绍

前端开发中经常涉及到进程和线程的概念，特别是在浏览器中。理解这两个概念对于理解浏览器的工作机制和前端性能优化非常重要。以下是详细介绍： 1. 什么是进程和线程？ 进程： 是操作系统分配资源的基本单位。一个程序启动后&#xf…...

编程日记 2025/5/25 9:10:44

本地用docker装mysql

目录拉取镜像查看镜像启动容器查看运行中的容器连接到 MySQL 容器其他一些操作装WorkBench链接mysql——————————————允许远程登录MySql 拉取镜像 docker pull mysql查看镜像 docker image lsREPOSITORY TAG IMAGE ID CREATED SIZE mysq…...

编程日记 2025/6/2 20:55:38

设计模式行为型责任链模式（Chain of Responsibility Pattern）与常见技术框架应用解析

责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它允许将请求沿着处理者链进行发送。每个处理者对象都有机会处理该请求，直到某个处理者决定处理该请求为止。这种模式的主要目的是避免请求的发送者和接收者之间…...

编程日记 2025/6/2 20:55:54

Apache Spark中与数据分区相关的配置和运行参数

Apache Spark中与数据分区相关的配置和运行参数涉及多个方面，包括动态分区设置、分区数设置、Executor与并行度配置等。合理配置这些参数可以显著提高Spark作业的执行效率和资源利用率。在实际应用中，建议根据业务需求和计算集群的特性进行相应的调整和测…...

编程日记 2025/6/2 23:02:10

“深入浅出”系列之设计模式篇：（0）什么是设计模式

设计模式六大原则 1. 单一职责原则：一个类或者一个方法只负责一项职责，尽量做到类的只有一个行为原因引起变化。核心思想：控制类的粒度大小，将对象解耦，提高其内聚性。 2. 开闭原则：对扩展开放&#xf…...

编程日记 2025/5/29 22:38:28

【Git版本控制器--1】Git的基本操作--本地仓库

目录初识git 本地仓库认识工作区、暂存区、版本库 add操作与commit操作 master文件与commit id 修改文件版本回退撤销修改删除文件初识git Git 是一个分布式版本控制系统，主要用于跟踪文件的更改，特别是在软件开发中。为什么要版本…...

编程日记 2025/6/2 10:20:45

如何在Jupyter中快速切换Anaconda里不同的虚拟环境

目录介绍操作步骤 1. 选择环境，安装内核 2. 注册内核 3. 完工。视频教程介绍很多网友在使用Jupyter的时候会遇到各种各样的问题，其中一个比较麻烦的问题就是我在Anaconda有多个Python的环境里面，如何让jupyter快速切换不同的Pyt…...

编程日记 2025/6/1 8:32:41

Python自学 - “包”的创建与使用(从头晕到了然)

<< 返回目录 1 Python自学 - “包”的创建与使用(从头晕到了然) 相对于模块，包是一个更大的概念，按照业界的开发规范，1个代码文件不要超过1000行，稍微有点规模的任务就超过这个代码限制了，必然需要多个文件来管…...

编程日记 2025/6/3 21:52:12

ElasticSearch 同义词匹配

synonym.txt 电脑, 计算机, 主机复印纸, 打印纸, A4纸, 纸, A3 平板电脑, Pad DELETE /es_sku_index_20_20250109 PUT /es_sku_index_20_20250109 {"settings": {"index": {"number_of_shards": "5","number_of_replicas&quo…...

编程日记 2025/6/2 19:01:18

android 官网刷机和线刷

nexus、pixel可使用google官网线上刷机的方法。网址：https://flash.android.com/ 本文使用google线上刷机，将Android14 刷为Android12 以下是失败的线刷经历。准备工作下载升级包。https://developers.google.com/android/images?hlzh-cn 注意&…...

编程日记 2025/6/4 3:44:09

Vue环境变量配置指南：如何在开发、生产和测试中设置环境变量

-## 前言 Vue.js是一个流行的JavaScript框架，它提供了许多工具和功能来帮助开发人员构建高效、可维护的Web应用程序。其中一个重要的工具是环境变量，它可以让你在不同的环境中配置不同的参数和选项。在这篇博客中，我们将介绍如何在Vue应用程…...

编程日记 2025/6/3 16:55:53

蓝桥杯_B组_省赛_2022（用作博主自己学习）

题目链接算法11.九进制转十进制 - 蓝桥云课进制转换 21.顺子日期 - 蓝桥云课时间与日期 31.刷题统计 - 蓝桥云课时间与日期 41.修剪灌木 - 蓝桥云课思维 51.X 进制减法 - 蓝桥云课贪心 61.统计子矩阵 - 蓝桥云课二维前缀和 71.积木画 - 蓝桥云课动态规划 82.扫雷 - 蓝桥…...

编程日记 2025/5/31 2:40:40

【干货】交换网络环路介绍

定义以太网交换网络中为了提高网络可靠性，通常会采用冗余设备和冗余链路，然而现网中由于组网调整、配置修改、升级割接等原因，经常会造成数据或协议报文环形转发，不可避免的形成环路。如图7-1所示，三台设备两两相连就…...

编程日记 2025/6/2 23:02:45

unity——Preject3——面板基类

目录 1.Canvas Group Canvas Group 的功能 Canvas Group 的常见用途如何使用 Canvas Group 2.代码 3.代码分析类分析：BasePanel 功能作用实际应用代码解析：hideCallBack?.Invoke(); 语法知识点作用虚函数（virtual）和抽象类（abstract）的作用与区别 …...

编程日记 2025/6/2 22:15:02

BTC系列 - 启示录

推荐《区块链启示录：中本聪文集》这本书, 原来早在2010年, BTC生态还不完善的时候, 社区中就已经畅想出了未来其它链上的特色方案, 中本聪也都一一做了教父级回应: coinbase币的成熟时间, 交易池, 交易确认机制, 防51%攻击, 防双重消费, 水龙头, 轻量级客户端, 链上…...

编程日记 2025/6/4 11:48:43

C# 25Dpoint ，做一个备份 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace _25Dpoint {public partial cl…...

编程日记 2025/6/2 22:15:49

Kotlin构造函数

class Person {var name: String? nullvar age: Int? nullfun think() {println("Mr./Ms.$name, who is $age years old, is thinking!")} }fun main () {val p Person()p.name "Jimmy"p.age 20p.think() } 在Kotlin中任意一个非抽象类都无法被继承…...

编程日记 2025/6/2 10:13:17

springMVC---resultful风格

目录一、创建项目 pom.xml 二、配置文件 1.web.xml 2.spring-mvc.xml 三、图解四、controller 一、创建项目 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi…...

编程日记 2025/5/30 23:20:43

flutter 装饰类【BoxDecoration】

装饰类 BoxDecoration BoxDecoration 是 Flutter 中用于控制 Container 等组件外观的装饰类，它提供了丰富的属性来设置背景、边框、圆角、阴影等样式。 BoxDecoration 的主要属性 1.color 背景颜色。类型：Color?示例： color: Colors.blu…...

编程日记 2025/6/4 16:16:09

自动连接校园网wifi脚本实践（自动网页认证）

目录起因执行步骤分析校园网登录逻辑如何判断当前是否处于未登录状态？ 书写代码打包设置开机自动启动起因我们一般通过远程控制的方式访问实验室电脑，但是最近实验室老是断电，但重启后也不会自动连接校园网账户认证，远程工具&…...

编程日记 2025/6/2 10:20:08

微信小程序集成Vant Weapp移动端开发的框架

什么是Vant Weapp Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。官网地睛：介绍 - Vant Weapp (vant-ui.gith…...

编程日记 2025/6/2 13:24:49

MySQL从库 Last_SQL_Errno: 1197 问题处理过程

记录一个遇到过的错误，今天整理一下。问题 MySQL error code MY-001197 (ER_TRANS_CACHE_FULL): Multi-statement transaction required morethan max_binlog_cache_size bytes of storage; increase this mysqld variable and try again报错很明显是max_binlog_…...

编程日记 2025/6/2 22:15:18

springboot 加载本地jar到maven

在Spring Boot项目中，如果你想要加载一个本地的jar文件到Maven本地仓库，你可以使用Maven的install-file目标来实现。以下是一个简单的例子： 打开命令行工具（例如：终端或者命令提示符）。执行以下Maven命令…...

编程日记 2025/6/3 2:10:51

面向B站商业化场景的广告标题智能推荐

01.背景大模型的发展也在不断改变广告主/代理商广告创编的过程，为了提高广告主的创作效率，提升广告主投放标题的质量，我们利用大语言模型技术以及B站商业数据，能够让广告主仅需要输入特定的关键词，即可以生成理论上无…...

编程日记 2025/5/31 19:18:16

element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

最近在重构项目，使用了 element plus UI框架，有个功能是实现图片上传，且限制只能上传一张图片，结果，发现，可以限制只上传一张图片，但是上传按钮还在，如图： 解决办法&…...

编程日记 2025/6/3 16:49:07

java进行pdf文件压缩

文章目录 pdf文件压缩 pdf文件压缩添加依赖 <dependency><groupId>com.luhuiguo</groupId><artifactId>aspose-pdf</artifactId><version>23.1</version> </dependency>public class OptimizePdf {public static void opti…...

编程日记 2025/6/4 6:34:56

初识算法和数据结构P1：保姆级图文详解

文章目录前言1、算法例子1.1、查字典（二分查找算法）1.2、整理扑克（插入排序算法）1.3、货币找零（贪心算法） 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...

编程日记 2025/6/1 17:54:39

内网服务器添加共享文件夹功能并设置端口映射

参考网址 https://blog.csdn.net/Think88666/article/details/118438465 1.服务器安装smb服务，由于网路安全不允许使用默认端口（445，446），于是修改端口为62445、62446。 2.每台需要共享的电脑都要修改端口映射&#x…...

编程日记 2025/6/2 6:32:46

ruoyi-cloud docker启动微服务无法连接nacos，Client not connected, current status:STARTING

ruoyi-cloud docker启动微服务无法连接nacos，Client not connected, current status:STARTING 场景当使用sh deploy.sh base来安装mysql、redis、nacos环境后，紧接着使用sh deploy.sh modules安装微服务模块，会发现微服务无法连接nacos的情…...

编程日记 2025/6/3 22:58:58

Python----Python高级（函数基础，形参和实参，参数传递，全局变量和局部变量，匿名函数，递归函数，eval()函数，LEGB规则）

一、函数基础 1.1、函数的用法和底层分析函数是可重用的程序代码块。函数的作用，不仅可以实现代码的复用，更能实现代码的一致性。一致性指的是，只要修改函数的代码，则所有调用该函数的地方都能得到体现。在编写函数时&#xf…...

编程日记 2025/6/4 6:34:09

excel 整理表格，分割一列变成多列数据

数据准备对于很多系统页面的数据是没有办法下载的。这里用表格数据来举例。随便做数据的准备。想要看excel部分的可以把这里跳过，从数据准备完成开始看。需要一点前端基础知识，但不多（不会也行）。把鼠标放在你想要拿到本地的…...

编程日记 2025/6/3 21:43:01

Oracle 分区索引简介

目录一. 什么是分区索引二. 分区索引的种类2.1 局部分区索引（Local Partitioned Index）2.2 全局分区索引（Global Partitioned Index） 三. 分区索引的创建四. 分区索引查看4.1 USER_IND_COLUMNS 表4.2 USER_INDEXES 表五. 分区索…...

编程日记 2025/6/4 6:33:53

C++实现设计模式--- 观察者模式 (Observer)

观察者模式 (Observer) 观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，使得当一个对象的状态发生改变时，其依赖者（观察者）会收到通知并自动更新。意图定义对象之间的一对多依赖关系。当一个对象状…...

编程日记 2025/6/4 6:34:24

CentOS 6.8 安装 Nginx

个人博客地址：CentOS 6.8 安装 Nginx | 一张假钞的真实世界提前安装： # sudo yum install yum-utils 一般情况下这个工具系统已经安装。创建文件/etc/yum.repos.d/nginx.repo，输入内容如下： [nginx-stable] namenginx stab…...

编程日记 2025/6/3 0:22:31

px、em 和 rem 的区别：深入理解 CSS 中的单位

文章目录前言一、px - 像素 (Pixel)二、em - 相对父元素字体大小 (Ems)三、rem - 相对于根元素字体大小 (Root Ems)四、综合比较结语前言在CSS中，px、em和rem是三种用于定义尺寸（如宽度、高度、边距、填充等）的长度单位。它们各自有不同的…...

编程日记 2025/6/3 21:32:11

vue 表格内点编辑，单元格不切换成输入框问题分析

vue 表格渲染时，我点击编辑时，想直接在单元格上面进行编辑。效果如下，正常是文本效果，点击编辑时，出现输入框其实实现起来，逻辑很简单，但是中间我却出现了一个问题，效果始终出不…...

编程日记 2025/6/3 10:23:06

MATLAB学习笔记-table

1.在table中叠加table table 的每一列具有固定的数据类型。如果要让表的所有单元格都可以任意填充，就得让每一列都是 cell 类型，这样表中每个单元格都是“一个元胞”。创建时可以先构造一个空 cell 数组（大小为行数列数）&#x…...

编程日记 2025/6/4 16:26:57

使用 selenium-webdriver 开发 Web 自动 UI 测试程序

优缺点优点有时候有可能一个改动导致其他的地方的功能失去效果，这样使用 Web 自动 UI 测试程序可以快速的检查并定位问题，节省大量的人工验证时间缺点增加了维护成本，如果功能更新过快或者技术更新过快，维护成本也会随之提高…...

编程日记 2025/6/3 21:34:33

ffmpeg硬件编码

使用FFmpeg进行硬件编码可以显著提高视频编码的性能，尤其是在处理高分辨率视频时。硬件编码利用GPU或其他专用硬件（如Intel QSV、NVIDIA NVENC、AMD AMF等）来加速编码过程。以下是使用FFmpeg进行硬件编码的详细说明和示例代码。 1. 硬件编码支…...

编程日记 2025/6/3 21:32:46

脚本化挂在物理盘、nfs、yum、pg数据库、nginx（已上传脚本）

文章目录前言一、什么是脚本化安装二、使用步骤1.物理磁盘脚本挂载（离线）2.yum脚本化安装（离线）3.nfs脚本化安装（离线）4.pg数据库脚本化安装（离线）5.nginx脚本化安装（离…...

编程日记 2025/6/3 21:33:21

// Error: line 1: XGen: Candidate guides have not been associated!

Maya xgen 报错// Error: line 1: XGen: Candidate guides have not been associated! 复制下面粘贴到Maya脚本管理器python运行： import maya.cmds as cmds def connect_xgen_guides():guide_nodes cmds.ls(typexgmMakeGuide)for node in guide_nodes:downstream…...

编程日记 2025/6/3 21:34:16

投机解码论文阅读：Falcon

题目：Falcon: Faster and Parallel Inference of Large Language Models through Enhanced Semi-Autoregressive Drafting and Custom-Designed Decoding Tree 地址：https://arxiv.org/pdf/2412.12639 一看它的架构图，可以发现它是基于EAGLE…...

编程日记 2025/6/3 21:33:03

OpenCV实现基于交叉双边滤波的红外可见光融合算法

1 算法原理 CBF是*Cross Bilateral Filter(交叉双边滤波)*的缩写，论文《IMAGE FUSION BASED ON PIXEL SIGNIFICANCE USING CROSS BILATERAL FILTER》。论文中，作者使用交叉双边滤波算法对原始图像 A A A， B B B 进行处理得到细节&#xff0…...

编程日记 2025/6/3 21:33:41

Springboot整合WebService

1.1 概述 webservice 即 web 服务，因互联网而产生，通过 webservice 这种 web 服务，我们可以实现互联网应用之间的资源共享，比如我们想知道手机号码归属地，列车时刻表，天气预报，省市区邮…...

编程日记 2025/6/3 8:19:28

504 Gateway Timeout：网关超时解决方法

一、什么是 504Gateway Timeout？ 1. 错误定义 504 Gateway Timeout 是 HTTP 状态码的一种，表示网关或代理服务器在等待上游服务器响应时超时。通俗来说，这是服务器之间“对话失败”导致的。 2. 常见触发场景 Nginx 超时：反向代…...

编程日记 2025/6/1 7:57:15

C++ 的 pair 和 tuple

1 std::pair 1.1 C 98 的 std::pair 1.1.1 std::pair 的构造 C 的二元组 std::pair<> 在 C 98 标准中就存在了，其定义如下： template<class T1, class T2> struct pair;std::pair<> 是个类模板，它有两个成员&#x…...

编程日记 2025/6/4 10:39:19

抢十八游戏

前言我国民国一直流传着一个名叫“抢十八”的抢数游戏：参与游戏的两人从1开始轮流报数，每次至少报1个数，最多报2个数，每人报的每个数不得与自已报过的或对方报过的重复，也不得跳过任何一个数。谁先报到18&#xff0c…...

编程日记 2025/6/2 20:15:01

从玩具到工业控制--51单片机的跨界传奇【2】

咱们在上一篇博客里面讲解了什么是单片机《单片机入门》，让大家对单片机有了初步的了解。我们今天继续讲解一些有关单片机的知识，顺便也讲解一下我们单片机用到的C语言知识。如果你对C语言还不太了解的话，可以看看博主的C语言专栏哟&#xff…...

编程日记 2025/6/2 20:15:34

LLM实现视频切片合成前沿知识调研

1.相关产品产品链接腾讯智影https://zenvideo.qq.com/可灵https://klingai.kuaishou.com/即梦https://jimeng.jianying.com/ai-tool/home/Runwayhttps://aitools.dedao.cn/ai/runwayml-com/Descripthttps://www.descript.com/?utm_sourceai-bot.cn/Opus Cliphttps://www.opu…...

编程日记 2025/5/29 16:56:54

学习threejs，使用FlyControls相机控制器

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.FlyControls 相机控制…...

编程日记 2025/6/4 17:22:16