惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Forbes - Security
Forbes - Security
GbyAI
GbyAI
WordPress大学
WordPress大学
小众软件
小众软件
Y
Y Combinator Blog
The GitHub Blog
The GitHub Blog
S
SegmentFault 最新的问题
A
About on SuperTechFans
月光博客
月光博客
F
Fortinet All Blogs
宝玉的分享
宝玉的分享
Microsoft Security Blog
Microsoft Security Blog
大猫的无限游戏
大猫的无限游戏
Hugging Face - Blog
Hugging Face - Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
V2EX
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
N
Netflix TechBlog - Medium
Jina AI
Jina AI
博客园 - 聂微东
Schneier on Security
Schneier on Security
云风的 BLOG
云风的 BLOG
博客园 - 司徒正美
N
News | PayPal Newsroom
PCI Perspectives
PCI Perspectives
Last Week in AI
Last Week in AI
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
P
Proofpoint News Feed
Hacker News: Ask HN
Hacker News: Ask HN
B
Blog
aimingoo的专栏
aimingoo的专栏
P
Privacy International News Feed
Martin Fowler
Martin Fowler
罗磊的独立博客
H
Hackread – Cybersecurity News, Data Breaches, AI and More
NISL@THU
NISL@THU
Know Your Adversary
Know Your Adversary
C
Cybersecurity and Infrastructure Security Agency CISA
博客园 - 叶小钗
N
News and Events Feed by Topic
T
The Exploit Database - CXSecurity.com
Stack Overflow Blog
Stack Overflow Blog
S
Security @ Cisco Blogs
D
Darknet – Hacking Tools, Hacker News & Cyber Security
V
Vulnerabilities – Threatpost
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Threatpost
IT之家
IT之家
B
Blog RSS Feed

吃猫的鱼个人博客-个人编程技术

鸿蒙安装 Google Play 应用:microG 方案实践 OpenClaw 不是更聪明的 AI,而是能长期跑起来的 AI - 吃猫的鱼个人博客-个人编程技术 GAIA 测评体系 - 吃猫的鱼个人博客-个人编程技术 MCP(模型上下文协议)是什么 - 吃猫的鱼个人博客-个人编程技术 AI简历开发-自定义指令实现图片懒加载 - 吃猫的鱼个人博客-个人编程技术 AI简历开发-新增功能AI对话,深度润色经历、面试拷打 - 吃猫的鱼个人博客-个人编程技术 AI简历-做了个简历生成的项目 - 吃猫的鱼个人博客-个人编程技术 AI简历项目开发-从产品AI功能构思到封装AI润色组件 - 吃猫的鱼个人博客-个人编程技术 AI简历开发 - 记录如何实现纯前端切换简历多模板 - 吃猫的鱼个人博客-个人编程技术 JS进阶-原型链 - 吃猫的鱼个人博客-个人编程技术
前端进阶-事件循环 - 吃猫的鱼个人博客-个人编程技术
吃猫的鱼 · 2025-02-20 · via 吃猫的鱼个人博客-个人编程技术

前端进阶-事件循环

吃猫的鱼

渲染主线程

浏览器当中会有一个线程专门用于渲染(持续循环),叫做渲染主线程

js是执行在渲染主线程上的,因此js是单线程语言(并非浏览器是单线程运行状态)

渲染主线程承担着诸多工作,渲染页面、执行、js都在上面

浏览器事件循环定义

浏览器当中会有一个线程专门用于渲染(持续循环),叫做渲染主线程,js是执行在渲染主线程上的,因此js是单线程语言(并非浏览器是单线程运行状态)

有一个消息队列,若干个任务,当其它线程有任务的时候,会丢进消息队列当中。(先进先出队列)

渲染主线程一次执行一个任务,执行完当前任务后会去消息队列中拿下一个任务进行执行,以此类推。当消息队列当中没有任务的时候,渲染主线程进入休眠状态,当有新的任务的时候会将其唤醒。

异步

有些任务无法立即执行,称为异步执行。

常见的:

  • 计时完成后需要执行的任务:setTimeoutsetIntervel
  • 网络通信完成后需要执行的函数:XHRfetch
  • 用户操作后执行的函数:addEventListener

异步函数,如:

setTimeout(fn,3000)   // 3秒后执行fn函数
addEventListener('click',fn)  //点击运行的函数

渲染主线程运行计时任务都是异步,否则导致浏览器卡死。

image-20220810104858857

运行计时任务(异步的过程):

  1. 提交计时任务(如setTimeout(fn,3000)3s 后执行函数 fn
  2. 计时任务进入消息队列
  3. 渲染主线程拿到计时任务的时候,把计时任务提交给计时线程,然后就不管了,接着执行其它的任务
  4. 计时线程开始计时,等待三秒计时结束后,把 fn 扔进消息队列
  5. 渲染主线程从消息队列中拿到 fn 执行
  6. 异步执行结束

如何理解js异步?

回答逻辑:

为什么要用异步?(js是单线程语言)——>不用异步会造成什么后果?——>异步是怎么进行的?

JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中。而渲染主线程只有一个,
而渲染主线程承担着诸多的工作,渲染页面、执行 JS (包括解析html、解析css等)都在其中运行。
如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。
这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。
所以浏览器采用异步的方式来避免。
具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。

是否存在优先级?

任务有优先级吗?

任务没有优先级,在消息队列中先进先出

消息队列是有优先级的

根据 W3C 的最新解释:

随着浏览器的复杂度急剧提升,W3C 不再使用宏队列的说法

在目前 chrome 的实现中,至少包含了下面的队列:

  • 延时队列:用于存放计时器到达后的回调任务,优先级「中」
  • 交互队列:用于存放用户操作后产生的事件处理任务,优先级「高」
  • 微队列:用户存放需要最快执行的任务,优先级「最高」

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

例如:

// 立即把一个函数添加到微队列
Promise.resolve().then(函数)

浏览器还有很多其他的队列,由于和我们开发关系不大,不作考虑

阐述一下 JS 的事件循环(面试)

参考答案:

事件循环又叫做消息循环,是浏览器渲染主线程的工作方式

在 Chrome 的源码中,它开启一个不会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列,这种说法目前已无法满足复杂的浏览器环境,取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级,在一次事件循环中,由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行。

JS 中的计时器能做到精确计时吗?为什么?(面试)

参考答案:

不行,因为:

  1. 计算机硬件没有原子钟,无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差
  3. 按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时又带来了偏差
  4. 受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差

单线程是异步产生的原因

事件循环是异步的实现方式

问题总结(复习)

  • 进程和线程的概念
  • 浏览器的进程模型
  • 线程模式和异步模式
  • 什么是阻塞
  • 事件循环和异步的关系
  • chrome源码中的事件循环
  • 事件循环过程
  • 多任务的优先级队列
  • 计时器精准性问题