首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的事件循环机制及其运行原理

368

分享到

JavaScript中的事件循环机制及其运行原理

JavaScript事件循环机制 JS事件循环机制 2023-05-18 09:05:35 368人浏览独家记忆

摘要

javascript是单线程的非阻塞的脚本语言单线程只有一个主线程来处理任务。非阻塞 js引擎执行异步任务时，不会一直等待返回结果，主线程会挂起（pending）这个任务，继续

javascript是单线程的非阻塞的脚本语言

单线程

只有一个主线程来处理任务。

非阻塞

js引擎执行异步任务时，不会一直等待返回结果，主线程会挂起（pending）这个任务，继续执行其他任务，当异步任务返回结果时，js将异步任务的callback放到任务队列中，等到当前任务栈中的任务都执行完毕，处于闲置状态的主线程按照队列顺序将队首的calback函数加入到执行栈中，执行该函数的同步代码，如果又遇到异步任务，再将其回调函数加入到队列中–事件循环机制。

JS通常是非阻塞的，除了某些特殊情况，JS会停止代码执行：alert, confirm, prompt

js的任务队列分为同步任务和异步任务

同步任务

在主线程里执行，当浏览器第一遍过滤html文件的时候可以执行完；（在当前作用域直接执行的所有内容，包括执行的方法、new出来的对象）

异步任务

比较耗费时间与性能的，当浏览器执行到这些的时候会将其丢到异步任务队列中，不会立即执行的任务

异步任务分为宏任务（Macrotask）和微任务（microtask），执行的优先级不同

宏任务：script, setTimeout, setInterval, setImmeditate, T/O, UI rendering

微任务：process, nextTick, promise.then(), object.observe, MutationObserver, await, async

回调函数是微任务，会被加入微任务队列，回调函数是宏任务，会被加入宏任务队列，微任务优先级高于宏任务

Event loop过程

主线程开始执行一段代码, 假设开始执行一个 script 标签内的代码，将代码放入执行栈中执行，同步代码优先执行，执行过程中，当遇到任务源时，判断是宏任务还是微任务。
如果是宏任务，加入到宏任务队列中，如果是微任务，加入到微任务队列中。
同步代码执行完成，执行栈空闲，检查微任务队列中是否有可执行任务，如果有，依次执行所有微任务队列中的任务。如果没有。当前任务执行结束。
DOM渲染。
检查宏任务队列是否有可执行的宏任务，如果有，取出队列中最前面的那个宏任务，加入到执行栈中开始执行，然后重复前面步骤，直到宏任务队列中所有任务执行结束

微任务在DOM渲染前触发，宏任务在DOM渲染后触发

代码示例1

// 语句一
console.log(1);
// 语句二
setTimeout(()=>{
    console.log(2);
},0);
//语句三
Promise.resolve().then(()=>{
    console.log(3);
})
// 语句四
console.log(4);

//输出顺序
//1，4，3，2

代码示例2

console.log("script start");
setTimeout(function () {
  console.log("setTimeout");
}, 0);
Promise.resolve()
  .then(function () {
    console.log("promise1");
  })
  .then(function () {
    console.log("promise2");
  });
console.log("script end");

代码示例3

new Promise(…)中的代码，也是同步代码，会立即执行。只有then之后的代码，才是异步执行的代码

console.log("script start");
setTimeout(function () {
  console.log("timeout1");
}, 10);
new Promise((resolve) => {
  console.log("promise1");
  resolve();
  setTimeout(() => console.log("timeout2"), 10);
}).then(function () {
  console.log("then1");
});
console.log("script end");

代码示例4

async 和 await 是 Generator 和 Promise 的语法糖。async 函数和普通函数一样，只是表示这个函数里有异步操作的方法，并返回一个 Promise 对象

await后面的函数执行完毕时，await会产生一个微任务(Promise.then是微任务)。

// 等价
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
// Promise 写法
async function async1() {
  console.log("async1 start");
  Promise.resolve(async2()).then(() => console.log("async1 end"));
}

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

代码示例5

// 1. 开始执行
console.log(1)     // 2. 打印 1
setTimeout(function () {    // 6. 浏览器在 0ms 后，将该函数推入任务队列
    console.log(2)    // 7. 打印 2
    Promise.resolve(1).then(function () {    // 8. 将 resolve(1) 推入任务队列  9. 将 function函数推入任务队列
        console.log('ok')    // 10. 打印 ok
    })
})    // 3.调用 setTimeout 函数，并定义其完成后执行的回调函数
setTimeout(function () {        // 11. 浏览器 0ms 后，将该函数推入任务队列
    console.log(3)    // 12. 打印 3
})    // 4. 调用 setTimeout 函数，并定义其完成后执行的回调函数
// 5. 主线程执行栈清空，开始读取 任务队列 中的任务
// output： 1  2 ok 3

代码示例6

// 1. 开始执行
console.log(1)     // 2. 打印 1
setTimeout(function () {    // 6. 浏览器在 0ms 后，将该函数推入任务队列
    console.log(2)    // 7. 打印 2
    Promise.resolve(1).then(function () {    // 8. 将 resolve(1) 推入任务队列  9. 将 function函数推入任务队列
        console.log('ok')    // 10. 打印 ok
    })
})    // 3.调用 setTimeout 函数，并定义其完成后执行的回调函数
setTimeout(function () {        // 11. 浏览器 0ms 后，将该函数推入任务队列
    console.log(3)    // 12. 打印 3
})    // 4. 调用 setTimeout 函数，并定义其完成后执行的回调函数
// 5. 主线程执行栈清空，开始读取 任务队列 中的任务
// output： 1  2 ok 3

代码示例7

setTimeout(function(){
  console.log('1')
});
new Promise(function(resolve){
  console.log('2');
  resolve();
}).then(function(){
  console.log('3')
});
var timer;
timer = setInterval(function(){
 console.log('5');
  clearInterval(timer);
})；
new Promise(function(resolve){
  resolve();
}).then(function(){
  console.log('6')
});
console.log('4');
// 2,4,3,6,1,5

代码示例8

Promise.resolve().then(()=>{
  console.log('Promise1')  
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
});
setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')    
  })
},0);
console.log('start');
// start -> Promise1 -> setTimeout1 -> Promise2 - > setTimeout2

实例

<body>
  <div id="box"></div>
  <script src="./app.js"></script>s
</body>
//js
const box = document.getElementById('box')
box.innerHTML = '<P>我是后来插进去的内容</P>'
console.log("1");
setTimeout( ()=>{
    console.log("2");
    alert("定时器执行了")
},0 )
Promise.resolve().then(()=>{
    console.log("3")
    alert("Promise执行了")
})
console.log("4");

tip：从规范来看，microtask （微任务）优先于 macrotask（宏任务）执行，所以如果有需要优先执行的逻辑，放入microtask 队列会比 task 更早的被执行。

到此这篇关于JavaScript中的事件循环机制及其运行原理的文章就介绍到这了,更多相关JavaScript事件循环机制内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript中的事件循环机制及其运行原理

本文链接: https://www.lsjlt.com/news/211846.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript中的事件循环机制及其运行原理

javascript是单线程的非阻塞的脚本语言单线程只有一个主线程来处理任务。非阻塞 JS引擎执行异步任务时，不会一直等待返回结果，主线程会挂起（pending）这个任务，继续...

99+

2023-05-18

JavaScript事件循环机制 JS事件循环机制
Node.js 事件循环的原理与机制

...

99+

2024-04-02
如何从Javascript事件循环看出Vue.nextTick的原理和执行机制

今天就跟大家聊聊有关如何从Javascript事件循环看出Vue.nextTick的原理和执行机制，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。抛砖...

99+

2024-04-02
JavaScript运行机制及原理是什么

这篇文章主要介绍“JavaScript运行机制及原理是什么”，在日常操作中，相信很多人在JavaScript运行机制及原理是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...

99+

2024-04-02
JavaScript事件循环的原理是什么

今天小编给大家分享一下JavaScript事件循环的原理是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。理解 JavaS...

99+

2023-07-04
JavaScript 的setTimeout与事件循环机制event-loop

目录1.先说说我们都知道的setTimeout2.再讲讲我们可能不知道的setTimeoutevent-loop3. node中的时间循环执行顺序4. 关于事件循环中的promise...

99+

2024-04-02
深入了解Javascript的事件循环机制

目录单线程的Javascript同步 vs 异步宏任务 vs 微任务定时器To Be Continued单线程的Javascript JavaScript是一种单线程语言，它主要用...

99+

2024-04-02
简单聊聊JavaScript的事件循环机制

目录前言概念举个栗子TIP再次举个栗子总结前言 JavaScript是一门单线程的弱类型语言，但是我们在开发中，经常会遇到一些需要异步或者等待的处理操作。类似ajax，亦或者ES6...

99+

2024-04-02
JavaScript 关于事件循环机制的刨析

目录前言：一、事件循环和任务队列产生的原因：二、事件循环机制：三、任务队列：3.1 任务队列的类型：3.2 两者区别：3.3 更细致的事件循环过程四、强大的异步专家 process....

99+

2024-04-02
JS的事件循环执行机制详解

目录前言JS语言的特点JS中同步和异步的使用事件循环是什么？事件循环执行过程微任务和宏任务的区别JS执行/运行机制最后前言在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，...

99+

2023-05-19

JS事件循环执行机制 JS事件循环 JS事件
vue.js的事件循环机制如何理解

这篇文章主要介绍了vue.js的事件循环机制如何理解的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue.js的事件循环机制如何理解文章都会有所收获，下面我们一起来看看吧。一、事件循环机制介绍 &n...

99+

2023-06-29
Node.js 事件循环与其他编程语言的事件机制对比

...

99+

2024-04-02
Javascript前端事件循环机制详细讲解

目录一、消息队列和事件循环1.单线程处理机制2.事件循环机制3.消息队列4.IO线程5.页面使用单线程的缺点二、setTimeout1.浏览器怎么实现 setTimeout2.使用s...

99+

2022-12-30

JavaScript事件循环机制 JS循环机制
Node.js中事件循环的机制是什么

本篇内容介绍了“Node.js中事件循环的机制是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！先看一个demo：setTimeout((...

99+

2023-06-17
JavaScript中的事件循环方式

目录概述原理同步>微任务>宏任务案例解析能否先将promise.then分发到微任务中js是单线程，非阻塞，试想如果是多线程，一个线程在某个DOM节点上添加内容，另一个线...

99+

2024-04-02
一文详解JS中的事件循环机制

目录前言1、JavaScript是单线程的2、同步和异步3、事件循环前言我们知道JavaScript 是单线程的编程语言，只能同一时间内做一件事，按顺序来处理事件，但是在遇到异步事...

99+

2024-04-02
node.js事件循环机制及与js区别详解

目录一、是什么二、流程三、题目一、是什么在浏览器事件循环(opens new window)中，我们了解到javascript在浏览器中的事件循环机制，其是根据HTML5定义的规范...

99+

2024-04-02
nodejs中事件循环机制的示例分析

这篇文章主要介绍了nodejs中事件循环机制的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前端开发离不开JavaScript，Javascript是一种web前端语...

99+

2023-06-14
实例详解JS中的事件循环机制

目录一、前言二、宏、微任务三、Tick 执行顺序四、案例详解1.掺杂setTimeout2.掺杂微任务，此处主要是Promise.then3.掺杂async/await一、前言之前...

99+

2024-04-02
JS中事件循环机制的示例分析

小编给大家分享一下JS中事件循环机制的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1、JavaScript是单线程的JavaScript 是一种单线程的...

99+

2023-06-29