百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

JS 中的 Event Loop 是什么? js event.preventdefault

xsobi 2024-12-16 17:05 1 浏览

大家好,我是前端西瓜哥,今天来认识一下什么是 Event Loop。

Event Loop,简单翻译就是 事件循环,是 JS 语言下实现运行时的一个机制。

JS 的异步并不像其他语言(比如 Java)的异步那样可以实现真正的并发执行,本身其实是个单线程。

JS 是维护了一个 任务队列,每当要执行一些异步任务,比如定时器或者是点击按钮触发的事件响应函数。它们不会立即执行,而是放到这个队列里,等待已经在排队的其他任务先执行完,才轮到它们。

队列是一个操作受限的有序列表,表现为为先进入的元素必须先出去,即 “先进先出”,很像排队的感觉。

不过也有一些特殊的队列,比如优先级队列,它是优先级高的元素先出队。

之所以叫 Event Loop,因为它的逻辑可以描述为下面代码:

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

当一个任务被完成后,队列会变成等待下一个任务状态,然后处理下一个任务,如此循环往复。

因为 JS 的代码执行本身是一个单线程,为了不让执行阻塞,JS 会把网络请求操作、渲染浏览器页面等操作,交给其他的线程,等待其他线程处理好把结果返回给 JS。

所以 JS 不合适 CPU 密集型,更适合 IO 密集型的场景。因为它只有一个线程,如果计算耗时太长,就会阻塞其他要执行的任务,导致卡顿,甚至崩溃。

setTimeout 定时器并不准

setTimeout 在特定时间后要执行的函数,并不会立即执行,而是会先放到任务队列中,先等待前面的任务同步执行完成了,才能执行我们这个。

下面看一个例子,因为第一个 setTimout 有一个非常耗时的同步任务,导致下一个 setTimeout 的执行阻塞,比前面一个 setTimeout 执行要慢半秒。

const start = new Date().getTime();
setTimeout(() => {
  console.log('1:', new Date().getTime() - start);
  let num = 0;
  for (let i = 0; i < 999999999; i++) {
    num = i;
  }
}, 1000);
setTimeout(() => {
  console.log('2:', new Date().getTime() - start);
}, 1000);
/**
 * 输出结果:
 * 1: 1001
 * 2: 1505
 */

定时器的时间,指的是能执行的最早时间,但不能保证一定能在这个时间点立即执行。

宏任务和微任务

任务队列并不是严格意义上的先进先出的正常队列,是可以调整执行顺序的。

我们将要执行的任务分为宏任务和微任务,其中宏任务是正常的先进先出,而微任务则是可以插队,优先于宏任务先执行。宏任务必须在所有微任务执行后才能执行。

当我们给任务队列添加一个微任务时,它会跑到任务队列宏任务前。多个微任务入队时,会保持它们的相对顺序。

宏任务有:

  • script,即 HTML 嵌入的脚本;
  • setTimeout / setInterval 定时器;
  • setImmediate,这是 nodejs 特有的 API;
  • requestAnimationFrame,会在页面重绘前执行;
  • I/O 操作,比如网络请求完成的回调函数执行任务、还比如点击按钮要执行的回调等。这些操作其实是其他的线程完成后触发的,暂且归纳为 I/O 操作。

微任务有:

  • Promise 从 pending 状态转换为其他状态时,触发 then/catch/finaly 中的函数,比如 Promise.resolve().then(fn)。这是最常见的微任务。
  • MutationObserver,用于监听 DOM 的变化
  • process.nextTick,nodejs 特有的 API

任务队列,理论上一个就够了,但也可以是多个队列的组合,没有强行要求。

多个任务队列的实现可以更好地实现优先级的控制,比如对于定时器任务,理论上应该是在多个宏任务中最先执行比较好。浏览器没考虑这种情况,但 nodejs 给宏任务中也设置优先级,会让定时器任务最先执行。

Event Loop 还是挺复杂的,标准文档也比较长,我也没怎么看,感兴趣可以看看。

https://html.spec.whatwg.org/multipage/webappapis.html#event-loops

一道经典异步题

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(function() {
  console.log("setTimeout");
}, 0);
async1();
new Promise(function(resolve) {
  console.log("promise1");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log('script end')

解题思路为:

  • 找到同步代码。同步代码有:普通同步代码、new Promise(fn) 执行传入的回调函数、async 执行时遇到 await 的前面部分(包括 await 的右侧函数执行也是同步的,这里是易错点)。
  • 看看任务队列中有哪些微任务和宏任务,记住微任务全执行完了才会执行宏任务。
  • 执行任务,任务里面的异步任务又按顺序进入到任务队列。

结果是:

// 同步代码
script start
async1 start
async2
promise1
script end
// 微任务
async1 end
promise2
// 宏任务
setTimeout

结尾

JS 运行机制是单线程,当有多个异步任务要同时执行,并不能并发执行,必须让优先级高的任务执行完才能执行后面的。如果正在执行的任务比较耗时,会导致后面的任务被阻塞。

Event Loop 的机制中,最基本的一条就是:微任务比宏任务先执行

我是前端西瓜哥,欢迎关注我,一起学习前端技术。

相关推荐

好用的云函数!后端低代码接口开发,零基础编写API接口

前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数,人人都能编写和发布自己的API接口

你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...

极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七,Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...