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 ...
随机推荐
- layer.js 注册登录切换的问题
layer.js 是一个很好用的弹窗框架,使用的时候很方便,但是今天遇到一个问题,让我很头疼啊,一直都做不出来,就是登录和注册弹窗的切换问题 这里涉及到两个页面:guide.html 即父页面,den ...
- CSS: pseudo-classes and pseudo-elements
1.Definition: pseudo-classes The pseudo-class concept is introduced to permit selection based on inf ...
- [Redis]Redis高级特性的配置及使用
---------------------------------------------------------------------------- [Redis安全性] 一 . 默认我们进入Re ...
- js学习(4) 函数
JavaScript有三种声明函数的方法 (1)function命令 function print(s) { console.log(s); } (2)函数表达式 1.var print = func ...
- Codeforces Round #436 (Div. 2)C. Bus 模拟
C. Bus time limit per test: 2 seconds memory limit per test: 256 megabytes input: standard input out ...
- 数据库mysql之慢查询优化
今天项目遇到一个问题:就是在公司test环境中执行sql查询语句很快,也就几百毫秒,但是放到sit环境中测试就要延迟至少1分钟左右. 网上找了很多原因,大多数都是说索引问题,我看了索引没问题,又重新建 ...
- php正则提取html图片(img)src地址与任意属性的方法
<?php /*PHP正则提取图片img标记中的任意属性*/ $str = '<center><img src="/uploads/images/2017020716 ...
- 转载-js如何设置网页横屏和竖屏切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- POJ1862 Stripies 贪心 B
POJ 1862 Stripies https://vjudge.net/problem/POJ-1862 题目: Our chemical biologists have invented ...
- HTTP协议简单认识
一.HTTP协议简介 HTTP超文本传输协议是一种用于分布式,协作式和超媒体信息系统的应用层协议 二.HTTP协议概述 HTTP是一个客户端和服务端请求和响应的标准 三.HTTP协议工作步骤 1.客户 ...