javascript事件循环
js单线程
js是单线程的,这样更有利与用户交互以及DOM操作;有关进程与线程的详细解释可以点击传送门;尽管webworker可以实现多线程,但本质上他还属于单线程,由webworker创建的线程都由主线程控制并且只能进行计算而已;
js同步、异步
同步执行:即js主线程按顺序执行任务,如遇操作webAPI/ajax等代码时会等待其响应后面代码得不到执行,也就是下一个任务必须等到前一个任务执行完成;
异步执行:js是单线程的本身不具备异步能力,但浏览器可以;当js执行时遇到webAPI(如setTimeout/ajax等),会立即返回一个值,从而不阻塞主线程,而真正的异步由浏览器执行,待完成后讲其回调函数推入js主线程的消息队列中等待主线程调用;
事件循环机制[Event-loop]
js执行时其主线程拥有一个执行栈[个人习惯叫调用栈](stack)和一个消息列队[也叫任务列队或事件列队](Event-queue);当js执行时遇到函数function时会将其入栈待函数执行完在出栈,主线程调用执行栈并执行,如果遇到webAPI会异步执行;当执行栈中没有任务时,主线程会查询消息列队,如查询成功,则将查询的任务入栈执行,直到执行栈为空,再次查询消息列队,这样形成一个循环就是大名鼎鼎的事件循环[Event-loop];由于异步执行是浏览器完成的这也就好理解为什么js线程阻塞时操作dom事件会在线程恢复后依次执行,[js主线程的任务列队是浏览器推入的,js线程阻塞!==浏览器线程阻塞,换言之即是主线程阻塞也不妨碍向任务列队推入任务];画个草图;
再来段代码:
// 主线程执行fn1任务 1
function fn1(){
console.log("任务1执行")
// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理 2
// 浏览器收到后 0 毫秒将回调函数推入消息列队; 异步执行
setTimeout(function(){// 查询到一个回调任务 入栈执行 5
console.log("回调1执行")
// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理 6
// 浏览器收到后 500 毫秒将回调函数推入消息列队; 异步执行
setTimeout(function(){// 查询到一个回调任务 入栈执行 7
console.log("回调2执行")
},500)
},0)
}
// 主线程执行fn2任务 3
function fn2(){console.log("任务2执行")}
// 执行栈没有可执行任务 开始查询消息列队 4
Macrotasks 和 Microtasks
消息列队分为两种即Macrotasks[Task Queue]与Microtasks[Microtasks Queue ];
- macrotasks:
setTimeout
,setInterval
,setImmediate
, I/O, UI rendering microtasks:
process.nextTick
,Promises
,Object.
MutationObserver
这就引发一个问题他俩到底该谁先执行呢?Promise/A+规范指出:
console.log(1);
setTimeout(function(){
console.log(7)
},0);
setTimeout(function(){
new Promise(function(resolve){
resolve();
}).then(function(){
console.log(8)
}).then(function(){
console.log(9)
}).then(function(){
console.log(10);
})
},0);
new Promise(function(resolve){
resolve();
}).then(function(){
console.log(3)
}).then(function(){
console.log(4)
}).then(function(){
console.log(5)
}).then(function(){
console.log(6)
})
console.log(2);
// 1 2 3 4 5 6 7 8 9 10
上边代码执行过程:
js执行console 1 遇到setTimeout改为异步执行,又遇setTimeout再次异步执行,接着执行遇到promise 被推入microtasks型任务列队之后执行console 2 至此执行栈为空开始查询消息列队,先去查询microtasks发现有个 有任务可以执行,接着会将任务入栈执行并相应打印 3 4 5 6【只要发现microtasks不为空就执行到为空为止】; 再次查询消息列队 此时microtasks列队已无任务可执行,接着查询macrotasks列队发现一个setTimeout回调等待执行,接着入栈执行并出栈,打印 7 ;再次查询列队 此时microtasks列队依然无任务,接着查询macrotasks列队又发现一个setTimeou回调等待执行,入栈执行 发现promise推入microtasks列队 出栈,执行栈又空了。查询消息列队 此时发现microtasks有任务可以执行,入栈 执行 出栈;打印响应 8 9 10;至此执行结束主线程处于等待状态;
javascript事件循环的更多相关文章
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- JavaScript 事件循环
JavaScript 事件循环 事件循环 任务队列 async/await 又是如何处理的呢 ? 定时器问题 阻塞还是非阻塞 实际应用案例 拆分 CPU 过载任务 进度指示 在事件之后做一些事情 事件 ...
- 深入理解 JavaScript 事件循环(一)— event loop
引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式 ...
- 深入理解 JavaScript 事件循环(二)— task and microtask
引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...
- javascript事件循环机制 浅尝手记
引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...
- JavaScript事件循环(Event Loop)机制
JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...
- JavaScript事件循环机制
事件循环 事件循环不仅仅包含事件队列,而是具有至少两个队列,除了事件,还要保持浏览器执行的其他操作.这些操作被称为任务,并且分为两类:宏任务(或通常称为任务)和微任务. 单次循环迭代中,最多处理一个宏 ...
- [浏览器事件循环] javaScript事件循环 EventLoop
前言 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 先熟悉基本概念 [堆Heap] 堆是一种数据结构 ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
随机推荐
- django在centos部署
各种坑各种蛋疼,搞了两天终于能用了.整体分2步: 1. 通过uwsgi 启动django项目 在manage.py同级目录,新建uwsgi.ini文件 [uwsgi] # 配置服务器的监听ip和端口, ...
- iptables随笔
iptables 分为四表五链 四表: filter表 nat 表 mangle 表 raw 表 五链 INPUT 链 OUTPUT 链 FORWARD 链 PREROUTING(路由前) POSTR ...
- asp.net文件/大文件上传需要配置的项目整理
HTTP 错误 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 最可能的原因: •Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值. 可尝 ...
- 使用__slots__节省python内存技巧
__slots__作用 __slots__有一个作用是:限制类实例绑定的属性,但是它有一个更重要的作用就是节省内存,当然更适用于数据量大的情况(万量级以上). __slots__节省内存的原理 cla ...
- C#Winform的DEV下拉下拉控件介绍
LookupEdit 下拉单选,可搜索,下拉展示为一个table: ComboxEdit 下拉单选,可当做text使用,输入数据源中没有的项,只有显示值: CheckcomboxEdit 下拉多选,可 ...
- mysql命令行常用指令
一. 启动mysql:service mysql start 停止mysql:service mysql stop 重启mysql:service mysql restart 查看mysql服务状态: ...
- thinkphp5中使用excel导出数据表格(包涵图片)
首先使用composer require phpoffice/phpexcel下载安装phpexcel包. 将包放入extend下面. 不附加图片的导出 /** * 导出excel(不带图片) * @ ...
- 791. Custom Sort String字符串保持字母一样,位置可以变
[抄题]: S and T are strings composed of lowercase letters. In S, no letter occurs more than once. S wa ...
- node.js 调试问题
最近打算在项目过程中使用node.js辅助解决一些问题,需要用到node.js的调试技术. 通常而言,大家都会提到debugger或者node-inspector方法. debugger方法谁用谁知道 ...
- 如何在chrome上打开SSL3.0
Chrome默认关闭对SSL3.0的支持,无法访问一些Web应用.可以手动打开他. 启动chrome依次选择 设置->高级->系统->打开代理设置->安全 将使用SSL 3.0 ...