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

前端学习一

一 进程与线程

线程是进程执行的最小单位,进程是系统分配任务的最小单位。

一个进程可执行最少一个线程。线程分为子线程和主线程。

主线程关闭则子线程关闭。

二  浏览器进程

浏览器是多进程多线程应用。

进程包括:

  • 浏览器进程 负责程序交互
  • 渲染进程 负责执行js等
  • 网络进程 负责网络进程加载

渲染主线程负责执行js、vue,解释css、html等。

一个标签一个渲染进程。

渲染主线程执行最多次。

有线程将任务放到渲染主线程执行队列,渲染主线程执行队列从消息队列中获取任务执行。

同一类型任务在同一队列中。

消息队列包括:

  1. 微队列 执行优先级最高
  2. 交互队列 执行优先级中
  3. 延时队列 执行优先级低 执行回调

三 js异步理解

js为单进程语言。渲染主线程中执行js。

使用同步则可能导致渲染主进程堵塞。

渲染主线程执行队列其他任务无法执行。

浏览器采用异步方法可避免堵塞。

具体方法:

  1. 任务执行时,主线程将任务交给其他线程执行,主线程继续执行后续代码。
  2. 任务中回调函数,包装为任务,加入到延时队列中,待主进程执行。

以上方法最大限度保证单进程的流畅运行。

"主线程将任务交给其他线程执行"可以解释为,执行代码时,有线程将不同任务放到不同队列,根据队列执行优先级,主线程执行完全局任务后,获取任务执行。

交互事件任务进入交互队列。

Promise.resolve().then(function(){}) 将任务放入微队列。

三 js事件循环

渲染主线程循环执行,各个队列的任务,事件循环又叫消息循环。

类似于后端消息队列,有守护线程监听队列,其他线程执行对应数据,监听到有新数据就执行。

浏览器中开始死循环,执行消息队列中的任务,其他线程将任务插入队尾。

同类型的任务必须在同一队列,不同的任务应属于不同队列。

不同队列执行的优先级不同,微队列必须再存且执行优先级最高,其他队列优先级由浏览器自行决定。

四 js定时器是否精准

不精准

  1. 硬件没有原子钟
  2. 操作系统计时函数偏差,js计时执行操作系统函数
  3. 计时器实现时嵌套层级超过5层,则带有4毫秒时间差
  4. 受渲染主线程事件循环影响,计时器的回调在延时队列中,只能在渲染主线程空闲时运行,因此有偏差

原子钟为一个硬件设备,目前有芯片级原子钟。

国产芯片级微型原子钟:多领域应用,市场前景广阔!-电子发烧友网

五 示例

例:

const btn = document.getElementById("btn")function clickf(event){setTimeout(function(){console.log("setTimeout1")},0) Promise.resolve().then(function(){console.log("Promise1");})}btn.addEventListener('click', clickf(event));setTimeout(function(){btn.click(); },0)  Promise.resolve().then(function(){console.log("Promise2");})function sleep(times){const date = Date.now();let currentDate = null;do {currentDate = Date.now();} while (currentDate - date < times);}function showaf(){let a=1console.log(a)}function showa(func){if (typeof func === 'function') {func(); // 执行回调函数}}function settimeout1(){console.log("setTimeout2")Promise.resolve().then(function(){console.log("Promise3");})console.log("setTimeout3") }setTimeout(settimeout1,0) showa(showaf)sleep(1000)let b=2console.log(b) 

输出结果

调用顺序如下:

先是全局代码执行,依次推入延时队列任务1、微队列任务1、延时队列任务2。

根据推入顺序和队列的优先顺序,依次执行微队列任务1,延时队列任务1,延时队列任务2。

之后类推。

参考:

事件循环那点事_计算机硬件没有原子钟怎么理解-CSDN博客

 

相关文章:

前端学习一

一 进程与线程 线程是进程执行的最小单位&#xff0c;进程是系统分配任务的最小单位。 一个进程可执行最少一个线程。线程分为子线程和主线程。 主线程关闭则子线程关闭。 二 浏览器进程 浏览器是多进程多线程应用。 进程包括&#xff1a; 浏览器进程 负责程序交互渲染…...

【Python · PyTorch】卷积神经网络(基础概念)

【Python PyTorch】卷积神经网络 CNN&#xff08;基础概念&#xff09; 0. 生物学相似性1. 概念1.1 定义1.2 优势1.2.1 权重共享1.2.2 局部连接1.2.3 层次结构 1.3 结构1.4 数据预处理1.4.1 标签编码① One-Hot编码 / 独热编码② Word Embedding / 词嵌入 1.4.2 归一化① Min-…...

Spring Framework 路径遍历漏洞复现(CVE-2024-38819)

hu0x01 产品描述: Spring Framework 是一个功能强大的 Java 应用程序框架,旨在提供高效且可扩展的开发环境。它结合了轻量级的容器和依赖注入功能,提供了一种使用 POJO 进行容器配置和面向切面的编程的简单方法,以及一组用于AOP的模块。0x02 漏洞描述: Spring Framework 存…...

心法利器[122] | 算法面试的八股和非八股讨论

心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。 2023年新的文章合集已经发布&#xff0c;获取方式看这里&#xff1a;又添十万字-CS的陋室2023年文章合集来袭&#xff0c;更…...

实操给自助触摸一体机接入大模型语音交互

本文以CSK6 大模型开发板串口触摸屏为例&#xff0c;实操讲解触摸一体机怎样快速增加大模型语音交互功能&#xff0c;使用户能够通过语音在一体机上查询信息、获取智能回答及实现更多互动功能等。 在本文方案中通过CSK6大模型语音开发板采集用户语音&#xff0c;将语音数据传输…...

AJAX家政系统自营+多商家家政系统服务小程序PHP+Uniapp

一款同城预约、上门服务、到店核销家政系统&#xff0c;用户端、服务端、门店端各端相互依赖又相互独立&#xff0c;支持选择项目、选择服务人员、选择门店多种下单方式&#xff0c;支持上门服务和到店核销两种服务方式&#xff0c;支持自营和多商家联营两种运营模式&#xff0…...

LiveData源码研究

LiveData 源码分析 前言 用过MVVM的大概知道LiveData可以感知组件的生命周期&#xff0c;当页面活跃时&#xff0c;更新页面数据&#xff0c; 当页面处于非活跃状态&#xff0c;它又会暂停更新&#xff0c;还能自动注册和注销观测者&#xff0c;能有效避免内存泄漏和不必要的…...

Root软件学习

一、命令行输入下方命令打开root文件 root filename.root 二、在root命令行下输入.help查看root下可用的指令 .help输入.q是退出root命令行 .q 三、输入下方指令查看当前打开的root文件的目录 .ls 四、打印Hits树下的内容&#xff08;print&#xff09; 方框里是各种树文…...

研发文档管理系统:国内外9大选择比较

文章主要对比了9款国内外研发文档管理系统&#xff1a;1.PingCode&#xff1b; 2. Worktile&#xff1b; 3. 飞书&#xff1b; 4. 石墨文档&#xff1b; 5. 腾讯文档&#xff1b; 6. 蓝湖&#xff1b; 7. Confluence&#xff1b; 8. Notion&#xff1b; 9. Slab。 在企业研发过…...

centos 7.9 freeswitch1.10.9环境搭建

亲测版本centos 7.9系统–》 freeswitch1.10.9 一、下载插件 yum install -y git alsa-lib-devel autoconf automake bison broadvoice-devel bzip2 curl-devel libdb4-devel e2fsprogs-devel erlang flite-devel g722_1-devel gcc-c++ gdbm-devel gnutls-devel ilbc2...

嵌入式驱动开发详解17(CAN驱动开发)

文章目录 前言CAN简介CAN收发器CAN协议讲解电气特性传输协议数据帧遥控帧错误帧过载帧帧间隔 同步矫正 CAN控制器CAN控制器模式CAN接收器CAN波特率 CAN设备树分析CAN测试后续参考文献 前言 该专栏主要是讲解嵌入式相关的驱动开发&#xff0c;但是由于部分模块的驱动框架过于复…...

探索 Janus-1.3B:一个统一的 Any-to-Any 多模态理解与生成模型

随着多模态技术的不断发展&#xff0c;越来越多的模型被提出以解决跨文本与图像等多种数据类型的任务。Janus-1.3B 是由 DeepSeek 推出的一个革命性的模型&#xff0c;它通过解耦视觉编码并采用统一的 Transformer 架构&#xff0c;带来了一个高度灵活的 any-to-any 多模态框架…...

黑马头条day01 微服务搭建

1.请求调用流程 如http://localhost:8803/static/js/2.0195d7180dc783c3fe99.js这种静态资源&#xff0c;采用http的发送到本地8803端口的静态资源请求&#xff0c;而nginx配置的监听8801、8802、8803&#xff0c;所以请求走到nginx&#xff0c;nginx的admin配置文件 upstream…...

AI辅助编程工具对比:Cursor AI、Windsurf AI 和 GitHub Copilot

功能和特性 1. Cursor AI 基于VS Code构建&#xff0c;集成了GPT-4等多个AI模型&#xff0c;提供高级智能支持。支持AI代码补全、错误修正以及通过自然语言执行命令。具备多文件编辑和上下文理解能力&#xff0c;能够在复杂项目中提供跨文件的智能建议。提供标签功能&#xf…...

【Qt】qt安装

在工作一年之后&#xff0c;还是想做一个Qt的教程&#xff0c;遥想研一刚刚接触Qt&#xff0c;从0到1学习&#xff0c;没有什么参考书籍&#xff0c;网上的资料也不多&#xff0c;幸好Qt官方文档写得好&#xff0c;加上自己肯研究&#xff0c;才堪堪入门。 现在我想自己写一个…...

课设项目十:智能手电筒(使用金沙滩51单片机)

00 题目介绍 功能&#xff1a; 硬件设置&#xff1a; 使用51单片机连接光敏传感器、LED灯和手电筒开关按钮。 环境感知&#xff1a; 实时监测周围光照强度。 LED控制&#xff1a; 根据光照强度自动控制LED灯的开关。 手动控制&#xff1a; 提供手电筒开关按钮&#xff0c;…...

Oracle中COUNT函数对NULL和空字符串的处理方式

Oracle中&#xff0c;使用COUNT函数的时候&#xff0c;COUNT()和COUNT(null)得到的结果都是0&#xff0c;也就是说&#xff0c;如果我们COUNT中选择的那列属性中为null的或者的那行是不会被计数的。MySQL中count(null)效果和Oracle中一样&#xff0c;但是count()能正常计数。 在…...

OpenHarmony和OpenVela的技术创新以及两者对比

两款有名的国内开源操作系统&#xff0c;OpenHarmony&#xff0c;OpenVela都非常的优秀。本文对二者的创新进行一个简要的介绍和对比。 一、OpenHarmony OpenHarmony具有诸多有特点的技术突破和重要贡献&#xff0c;以下是一些主要方面&#xff1a; 架构设计创新 分层架构…...

Windows常用命令

该篇文章是博主不断从工作中总结而来&#xff0c;会持续不断更新 文件和目录管理命令 列出指定目录中的文件和子目录&#xff1a;dir 路径 更改当前工作目录&#xff1a;cd 路径 创建新目录&#xff1a;mkdir 目录名 删除空目录&#xff1a;rmdir 目录名 删除指定文件&#xf…...

牛客网 SQL2查询多列

SQL2查询多列 select device_id,gender,age,university //查询哪些字段 from user_profile //从哪个表中查找 每日问题 C 中面向对象编程如何处理异常&#xff1f; 在C中&#xff0c;面向对象编程&#xff08;OOP&#xff09;处理异常主要通过异常处理机制来实现。C 提供了…...

容器,网络基础

小结&#xff1a; 1、利用网桥和虚拟网卡 2、利用Veth Pair虚拟设备&#xff0c;一个网卡可以直接出现在另外一个网卡中 一个Linux容器能看见的“网络栈”&#xff0c;实际上是被隔离在它自己的Network Namespace当中的 “网络栈”&#xff0c;就包括了&#xff1a;网卡&#…...

Treap树堆【东北大学oj数据结构8-4】C++

题面 二叉搜索树会因为插入的数据的值可能变得不平衡&#xff0c;搜索/插入/删除操作的效率变得低效。例如&#xff0c;如果依次插入 n 个升序的数据&#xff0c;则树将看起来像一个列表&#xff0c;其高度将为 n&#xff0c;并且查询时间变得很长。一个解决策略是随意打乱要插…...

基于STM32的智电表系统课题设计思路:python友好界面、ADC、UART串口、数据分析

1. 项目选题与需求分析 1.1 选题背景和动机 随着社会的快速发展&#xff0c;电力的消耗不断增加&#xff0c;如何高效管理和监测用电成为了一个重要的课题。传统的电表只能提供简单的用电计量&#xff0c;无法满足现代家庭和工业对用电数据实时监控、远程控制及数据分析的需求…...

博弈论1:拿走游戏(take-away game)

假设你和小红打赌&#xff0c;玩“拿走游戏”&#xff0c;输的人请对方吃饭.... 你们面前有21个筹码&#xff0c;放成一堆&#xff1b;每轮你或者小红可以从筹码堆中拿走1个/2个/3个&#xff1b;第一轮你先拿&#xff0c;第二轮小红拿&#xff0c;你们两个人交替进行;拿走筹码堆…...

【人工智能解读】神经网络(CNN)的特点及其应用场景器学习(Machine Learning, ML)的基本概念

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把…...

Spring Cloud与Spring Cloud Alibaba:全面解析与核心要点

Spring Cloud与Spring Cloud Alibaba&#xff1a;全面解析与核心要点 一、引言 在当今的分布式系统开发领域&#xff0c;Spring Cloud和Spring Cloud Alibaba都是极为重要的框架。它们为构建大规模、高可用、分布式的应用系统提供了丰富的工具和组件。本文将深入探讨Spring C…...

Java 泛型

1. 泛型 (1) 泛型&#xff1a;定义类、接口、方法时&#xff0c;同事声明了一个或多个类型变量(如<E>)&#xff0c;称为泛型类、泛型接口、泛型方法、它们统称为泛型。可以在编译阶段约束要操作的数据类型 public static void main(String[] args) {//没加泛型 可以放任何…...

CentOS7 搭建 MQTT(mosquitto)环境并收发数据

零&#xff1a;说在前面 最近在研究物联网相关内容&#xff0c;需要接收 Modbus 协议的数据。上游数据源提出由对方整合数据后使用 MQTT 协议将数据发送过来&#xff0c;因此需要了解一下什么是 MQTT。 首先&#xff0c;它是一个类似 kafka 的“发布/订阅”模式的消息框架&…...

操作系统课后习题2.2节

操作系统课后习题2.2节 第1题 CPU的效率指的是CPU的执行速度&#xff0c;这个是由CPU的设计和它的硬件来决定的&#xff0c;具体的调度算法是不能提高CPU的效率的&#xff1b; 第3题 互斥性&#xff1a; 指的是进程之间的同步互斥关系&#xff0c;进程是一个动态的过程&#…...

Mac Goland dlv 升级

Mac Goland dlv 升级 问题表现 WARNING: undefined behavior - version of Delve is too old for Go version 1.22.1 (maximum supported version 1.21)查看当前Goland dlv 版本 ☁ ~ /Applications/GoLand.app/Contents/plugins/go-plugin/lib/dlv/mac/dlv version Delve…...

vue使用pdfh5.js插件,显示pdf文件白屏

pdfh5&#xff0c;展示文件白屏&#xff0c;无报错 实现效果图解决方法(降版本)排查问题过程发现问题查找问题根源1、代码写错了&#xff1f;2、预览文件流的问题&#xff1f;3、pdfh5插件更新了&#xff0c;我的依赖包没更新&#xff1f;4、真相大白 彩蛋 实现效果图 解决方法…...

【FFmpeg】FFmpeg 内存结构 ⑥ ( 搭建开发环境 | AVPacket 创建与释放代码分析 | AVPacket 内存使用注意事项 )

文章目录 一、搭建开发环境1、开发环境搭建参考2、项目搭建 二、AVPacket 创建与释放代码分析1、AVPacket 创建与释放代码2、Qt 单步调试方法3、单步调试 - 分析 AVPacket 创建与销毁代码 三、AVPacket 内存使用注意事项1、谨慎使用 av_init_packet 函数2、av_init_packet 函数…...

[Unity Shader] 【游戏开发】【图形渲染】Unity Shader的种类2-顶点/片元着色器与固定函数着色器的选择与应用

Unity 提供了不同种类的 Shader,每种 Shader 有其独特的优势和适用场景。在所有类型的 Shader 中,顶点/片元着色器(Vertex/Fragment Shader)与固定函数着色器(Fixed Function Shader)是两种重要的着色器类型。尽管它们具有不同的编写方式和用途,理解其差异与应用场景,对…...

Unity 动画曲线研究(Dotween插件)

动画的曲线的介绍 动画曲线&#xff08;Animation Curve&#xff09;是一种用于描述动画属性值随时间变化的图形工具。 我们可以通过给自己的动画片段设定不同的动画曲线&#xff0c;使动画效果具有不同表现力。 常见的动画曲线设定有&#xff1a; 线性&#xff08;Linear&…...

适合小白的超详细yolov8环境配置+实例运行教程,从零开始教你如何使用yolov8训练自己的数据集(Windows+conda+pycharm)

目录 一、前期准备所需环境配置 1.1. 虚拟环境创建 1.2 下载yolov8源码&#xff0c;在pycharm中进行配置 1.2.1 下载源码 1.2.2 在pycharm终端中配置conda 1.3 在pycharm的terminal中激活虚拟环境 1.4 安装requirements.txt中的相关包 1.5 pip安装其他包 1.6 预训练…...

Linux中输入和输出基本过程

1.文件内核级缓冲区 前面在如何理解Linux一切皆文件的特点中提到为了保证在Linux中所有进程访问文件时的方式趋近相 同&#xff0c;在f ile 结构体中存在一个 files_operations 结构体指针&#xff0c;对应的结构体保存所有文件操作的函 数指针&#xff08;这个结构体也被称为…...

二、FIFO缓存

FIFO缓存 1.FIFO缓存介绍2.FIFO缓存实现3.FIFO缓存总结 1.FIFO缓存介绍 FIFO&#xff08;First-In-First-Out&#xff09;缓存 是一种简单的缓存淘汰策略&#xff0c;它基于先进先出的原则来管理数据。当缓存达到容量限制并需要淘汰元素时&#xff0c;最先进入缓存的元素会被移…...

Linux_挂载nas

1、安装挂载nas必要的服务 yum -y install nfs-utils rpcbind 2、挂载nas sudo mount -t nfs -o vers3,nolock,prototcp,noresvport <NAS-IP>:/path/to/shared /yourNasPath mount 命令详解&#xff1a; -t &#xff1a;文件系统类型 &#xff0c;这里指定的挂载类…...

uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!

**提要&#xff1a;**近段时间我们收到多个康复机构用户&#xff0c;咨询AI运动识别插件是否可以应用于肢力运动受限患者的康复锻炼中来&#xff0c;插件是可以应用到AI康复锻炼中的&#xff0c;今天小编就为您介绍一下AI运动识别插件在康腹锻炼中的应用场景。 一、康复机构的应…...

现代密码学总结(上篇)

现代密码学总结 &#xff08;v.1.0.0版本&#xff09;之后会更新内容 基本说明&#xff1a; ∙ \bullet ∙如果 A A A是随机算法&#xff0c; y ← A ( x ) y\leftarrow A(x) y←A(x)表示输入为 x x x ,通过均匀选择 的随机带运行 A A A,并且将输出赋给 y y y。 ∙ \bullet …...

按照字幕拆解视频实战

1. 基本实现思路 字幕文件处理&#xff1a; 提取字幕内容和时间戳&#xff08;如 SRT 文件格式&#xff09;。解析字幕中的开始时间和结束时间。 视频切割&#xff1a; 使用字幕的时间戳&#xff0c;剪辑对应时间段的视频。每段字幕对应一个子视频。 输出子视频&#xff1a; …...

2.11.静态链表

一.静态链表的基本概念&#xff1a; 1.上图说明&#xff1a;索引为0处是头结点&#xff0c;头结点不存储数据&#xff0c;但存储下一个结点的数组下标&#xff0c;本例中头结点里存储的下一个结点的数组下标为2&#xff0c;即索引为2的结点为头结点后的第一个结点&#xff0c;以…...

分页查询在数据库中的好处

分页查询在数据库中的好处主要体现在以下几个方面&#xff1a; 提高性能&#xff1a; 减少数据传输&#xff1a;分页查询只返回请求的页面数据&#xff0c;而不是整个数据集&#xff0c;这减少了网络传输的数据量&#xff0c;降低了网络延迟和带宽消耗。减少内存使用&#xff1…...

电子应用设计方案-54:智能AI人工智能机器人系统方案设计

智能 AI 人工智能机器人系统方案设计 一、引言 随着人工智能技术的快速发展&#xff0c;智能 AI 机器人在各个领域的应用越来越广泛。本方案旨在设计一个功能强大、智能高效、交互友好的人工智能机器人系统&#xff0c;以满足不同场景下的用户需求。 二、系统概述 1. 系统目标…...

μC/OS-Ⅱ源码学习(6)---事件标志组

快速回顾 μC/OS-Ⅱ中的多任务 μC/OS-Ⅱ源码学习(1)---多任务系统的实现 μC/OS-Ⅱ源码学习(2)---多任务系统的实现(下) μC/OS-Ⅱ源码学习(3)---事件模型 μC/OS-Ⅱ源码学习(4)---信号量 μC/OS-Ⅱ源码学习(5)---消息队列 本文进一步解析事件模型中&#xff0c;事件标志…...

ASP.NET|日常开发中读写TXT文本详解

ASP.NET&#xff5c;日常开发中读写TXT文本详解 前言一、读取 TXT 文本1.1 使用StreamReader类 二、写入 TXT 文本2.1 使用StreamWriter类 三、文件编码问题3.1 常见编码格式 四、错误处理和性能考虑4.1 错误处理4.2 性能考虑 结束语优质源码分享 ASP.NET&#xff5c;日常开发中…...

《C 语言向量运算:点亮人工智能几何计算之路》

在人工智能蓬勃发展的时代&#xff0c;数学运算作为其坚实的基石发挥着不可替代的作用。而向量的点积与叉积运算&#xff0c;更是在人工智能的几何计算领域有着独特且关键的地位。今天&#xff0c;就让我们一同深入探讨如何在 C 语言中实现向量的点积、叉积运算&#xff0c;并领…...

HarmonyOS 获取进程相关的信息process 常用的几个方法

获取进程相关的信息&#xff0c;提供进程管理的相关功能。 process 1. EventListener 2. isIsolatedProcess 3. is64Bit 4. getStartRealtime 5. getPastCpuTime 导入模块 import { process } from kit.ArkTS; 属性 名称类型可读可写说明uidnumber是否进程的用户标识。…...

Linux 权限管理实践:精确控制用户对 systemctl 和 journalctl 命令的使用

前言 在 Linux 系统管理中&#xff0c;精确控制用户对特定命令的访问权限是一项关键的安全实践。使用 systemctl 和 journalctl 命令时&#xff0c;不当的权限设置可能会导致不必要的风险。本篇博客将详细讨论如何通过 sudoers 文件和 Polkit 策略为不同用户配置 systemctl 和…...

图像处理之滤波

中值滤波、均值滤波、高斯滤波和双边滤波是常见的图像处理技术&#xff0c;主要用于去噪和图像平滑。低通滤波和高通滤波用于处理图像中的频率成分。它们的主要区别在于它们所允许通过的频率范围。滤波、卷积、去噪、模糊、提取特征是一个意思。 卷积就是两个矩阵的乘法&#…...