js事件循环机制理解

简介: js事件循环机制理解

首先谈起事件循环 就需要了解 js的单线程设计


                       js单线程就是 只有一个线程存在,同一时间只能做一件事


                       为什么js要设计成单线程 : 因为这跟js做的工作有关 js是作为浏览器的脚本语言 主要实现的功能是用户与浏览器之间的交互 以及操作DOM 这也就决定了它只能是单线程 否则会带来很复杂的问题 例如 js如果是多线程 这时有一个线程要修改DOM元素 而另一个元素要删除这个DOM元素 那是先修改还是先删除呢 这时候就会出现问题 所以js会设计成单线程模式。


               而js单线程有会出现阻塞的问题 因为js单线程同一时间只能做一件事 但是如果这个时候 我有很多个重要的任务需要去做 例如 现在有一个重要的任务浏览器DOM节点渲染需要尽快执行 而前面有一个异步任务 那么就需要等待他执行完毕再执行后续操作 这就造成了单线程产生的阻塞问题 而js用来解决单线程阻塞的方法 就是事件循环


               在js中所有任务都可以分为同步任务和异步任务


               同步任务: 立即执行的任务 同步任务一般会直接进入到主线程中执行


               异步任务: 异步任务可以分为微任务和宏任务   微任务 例如 : promise  宏任务  例如ajax网络请求 setTimeout定时器函数等


               在浏览器的执行机制中有三个状态 一个是 执行栈用来执行任务  一个是事件队列用来存放事件等待浏览器一个一个执行  最后一个是宿主环境 宿主环境用来处理异步任务


               执行顺序为 首先对整个代码从上到下执行 碰到同步任务直接执行 碰到异步任务直接推给 宿主环境 由宿主环境执行完毕后将结果放到事件队列内排队等待执行 而当例如用户与页面交互重新发起任务 则也是继续放到事件队列中等待执行 然后执行栈每执行完毕一个任务就会从事件队列中再取一个任务 这样循环执行 直到所有任务都被执行完毕为止。

相关文章
|
1月前
|
存储 JavaScript 前端开发
深入理解JavaScript中的事件循环(Event Loop):机制与实现
【10月更文挑战第12天】深入理解JavaScript中的事件循环(Event Loop):机制与实现
75 3
|
2月前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
2月前
|
JavaScript 安全 前端开发
乾坤js隔离机制
乾坤js隔离机制
|
7天前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。
|
15天前
|
JavaScript 前端开发 开发者
JavaScript的事件循环
【10月更文挑战第27天】理解JavaScript的事件循环机制对于正确编写和理解JavaScript中的异步代码至关重要,它是JavaScript能够高效处理各种异步任务的关键所在。
29 1
|
19天前
|
消息中间件 JavaScript 中间件
深入浅出Node.js中间件机制
【10月更文挑战第24天】在Node.js的世界里,中间件如同厨房中的调料,为后端服务增添风味。本文将带你走进Node.js的中间件机制,从基础概念到实际应用,一探究竟。通过生动的比喻和直观的代码示例,我们将一起解锁中间件的奥秘,让你轻松成为后端料理高手。
24 1
|
1月前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
36 1
|
1月前
|
Web App开发 JavaScript 前端开发
深入理解Node.js事件循环和异步编程模型
【10月更文挑战第9天】在JavaScript和Node.js中,事件循环和异步编程是实现高性能并发处理的基石。本文通过浅显易懂的语言和实际代码示例,带你一探究竟,了解事件循环的工作原理及其对Node.js异步编程的影响。从基础概念到实际应用,我们将一步步解锁Node.js背后的魔法,让你的后端开发技能更上一层楼!
|
1月前
|
设计模式 JavaScript API
Node.js 事件循环
10月更文挑战第3天
29 0
Node.js 事件循环
|
1月前
|
JSON JavaScript 中间件
深入浅出Node.js中间件机制
本文将带你探索Node.js中一个核心概念——中间件机制。我们将通过浅显的语言和生动的比喻,揭示中间件如何作为请求和响应之间的“交通枢纽”,在应用程序中起到至关重要的作用。从基础原理到实际应用,你将了解到中间件不仅简化了代码结构,还提高了开发效率,是Node.js开发不可或缺的一部分。
48 1