深入浅出Javascript事件循环机制
一、JS单线程、异步、同步概念
众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了~所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下。webworker仅仅能进行计算任务,不能操作DOM,所以本质上还是单线程。
二、事件循环机制
如上图为事件循环示例图(或JS运行机制图),流程如下:
三、函数调用栈与任务队列
Javascript有一个main thread 主进程和call-stack(一个调用堆栈),在对一个调用堆栈中的task处理的时候,其他的都要等着。当在执行过程中遇到一些类似于setTimeout等异步操作的时候,会交给浏览器的其他模块(以webkit为例,是webcore模块)进行处理,当到达setTimeout指定的延时执行的时间之后,task(回调函数)会放入到任务队列之中。一般不同的异步任务的回调函数会放入不同的任务队列之中。等到调用栈中所有task执行完毕之后,接着去执行任务队列之中的task(回调函数)。参考如上图
四、测试
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
这段代码很短,只有 7 行,我想,能读到这里的同学应该不需要我逐行解释这段代码在做什么吧。候选人面对这段代码时给出的结果也不尽相同,以下是典型的答案:
- A. 20% 的人会快速扫描代码,然后给出结果:
0,1,2,3,4,5
; - B. 30% 的人会拿着代码逐行看,然后给出结果:
5,0,1,2,3,4
; - C. 50% 的人会拿着代码仔细琢磨,然后给出结果:
5,5,5,5,5,5
;
只要你对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解,就知道正确答案是 C,代码的实际输出是:
2017-03-18T00:43:45.873Z 5
2017-03-18T00:43:46.866Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
首先i=0时,满足条件,执行栈执行循环体里面的代码,发现是setTimeout,将其出栈之后把延时执行的函数交给Timer模块进行处理。
当i=1,2,3,4时,均满足条件,情况和i=0时相同,因此timer模块里面有5个相同的延时执行的函数。
当i=5的时候,不满足条件,因此for循环结束,console.log(new Date, i)入栈,此时的i已经变成了5。因此输出5。
此时1s已经过去,timer模块将5个回调函数按照注册的顺序返回给任务队列。
执行引擎去执行任务队列中的函数,5个function依次入栈执行之后再出栈,此时的i已经变成了5。因此几乎同时输出5个5。
因此等待的1s的时间其实只有输出第一个5之后需要等待1s,这1s的时间是timer模块需要等到的规定的1s时间之后才将回调函数交给任务队列。等执行栈执行完毕之后再去执行任务对列中的5个回调函数。这期间是不需要等待1s的。因此输出的状态就是:5 -> 5,5,5,5,5,即第1个 5 直接输出,1s之后,输出 5个5;
五、进阶
如果添加了Promise又如何工作呢?
我们知道,Promise的回调函数不是传入的,而是使用then来调用的。因此,Promise中定义的函数应该是马上执行的,then才是其回调函数,放入queue队列中。
在参考的文章中还提到了一个重要的概念:
macro-task包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task包括:process.nextTick, Promises, Object.observe, MutationObserver
执行顺序:函数调用栈清空只剩全局执行上下文,然后开始执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列,执行完之后再执行所有的micro-task,就这样一直循环。
参考文献:https://www.cnblogs.com/hity-tt/p/6733062.html
深入浅出Javascript事件循环机制的更多相关文章
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- javascript事件循环机制 浅尝手记
引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- 浏览器中的JavaScript事件循环机制
浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...
- javaScript 事件循环机制
JavaScript是单线程的编程语言,只能同一时间内做一件事.但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这就是因为JS有事件循环机制. 事件循环流程总结 主线程开始执行一段代码, ...
- JS JavaScript事件循环机制
区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...
- JavaScript事件循环机制
事件循环 事件循环不仅仅包含事件队列,而是具有至少两个队列,除了事件,还要保持浏览器执行的其他操作.这些操作被称为任务,并且分为两类:宏任务(或通常称为任务)和微任务. 单次循环迭代中,最多处理一个宏 ...
- 一道面试题引发对javascript事件循环机制(Event Loop)的 思考(这里讨论针对浏览器)
- JS:事件循环机制、调用栈以及任务队列
点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...
随机推荐
- 163的Ubuntu apt镜像源
在/etc/apt/sources.list靠前的地方加入即可. 说明:http://mirrors.163.com/.help/ubuntu.html #15.10 wily, 15.04 vivi ...
- MySQL 分区知识点(二)
前言: MySQL 5.1+ 版本就开始支持分区功能了. 分区本质上就是在物理文件层面划分了多个物理子表来支撑,或者说是一组底层表的句柄对象的封装. 对于分区表的请求,都是通过句柄对象转化成对存储引擎 ...
- MySQL 大数据量修改表结构问题
前言: 在系统正常运作一定时间后,随着市场.产品汪的需求不断变更,比较大的一些表结构面临不得不增加字段的方式来扩充满足业务需求: 而 MySQL 在体量上了千万.亿级别数据的时候,Alter Tab ...
- android自定义日期组件之双DatePicker
1.效果图(两个DatePicker放在一起,同时选择起始与结束时间): 2.实现 2.1布局文件: <?xml version="1.0" encoding="u ...
- Android中字体颜色的设置
1.在Android中经常看到设置的颜色为八位的十六进制的颜色值,例如: 1 2 3 public static final class color { public static final ...
- svg札记
1.人老了,有些事情太容易忘记了,这里做下笔记,供参考,for self for you. 2.源于地图监控,建筑级别各大地图商的api(高德.百度.腾讯等)已经足够使用,唯独室内图这块还差点. 3. ...
- HTML代码中的空格和空行
HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格. 例子1:(文本内容中的连续空格) 代码 <p>这段文本中,输入连续的空格 大概输入了十个.</p> 显示效 ...
- hihocoder #1138 : Islands Travel
题意,求1到n的最短路.不难想到单源最短路,难点在于数量级太大,因此如何建图是关键: 因为cost = min{|Xi-Xj|, |Yi-Yj|}:所以,点i的移动只有两种情况,. x距离最近的点,. ...
- 树莓派相机操作 —— luvcview 的安装、raspistill:摄像头命令
MMAL (Multimedia Abstraction Layer) RaspiCam Documentation 0. lucview 的安装 安装命令:sudo apt-get install ...
- 总结的一些MySQL数据库面试题
1.sql语句应该考虑哪些安全性? 1.防止sql注入,对特殊字符进行转义,过滤或者使用预编译的sql语句绑定变量. 2.最小权限原则,特别是不要用root账户,为不同的类型的动作或者组建使用不同的账 ...