js消息任务队列

JS单线程、异步、同步概念

多次出现“事件循环”这个名词,简单说明了事件循环的步骤,以便理解nextTick的运行时机,这篇文章将更为详细的分析下事件循环。在此之前需要了解JS单线程,及由此产生的同步执行环境和异步执行环境。

  众所周知,JS是单线程,虽然有webworker酱紫的多线程出现,但也是在主线程的控制下。webworker仅仅能进行计算任务,不能操作DOM,所以本质上还是单线程。

  单线程即任务是串行的,后一个任务需要等待前一个任务的执行,这就可能出现长时间的等待。但由于类似ajax网络请求、setTimeout时间延迟、DOM事件的用户交互等,这些任务并不消耗 CPU,是一种空等,资源浪费,因此出现了异步。通过将任务交给相应的异步模块去处理,主线程的效率大大提升,可以并行的去处理其他的操作。当异步处理完成,主线程空闲时,主线程读取相应的callback,进行后续的操作,最大程度的利用CPU。此时出现了同步执行和异步执行的概念,同步执行是主线程按照顺序,串行执行任务;异步执行就是cpu跳过等待,先处理后续的任务(CPU与网络模块、timer等并行进行任务)。由此产生了任务队列与事件循环,来协调主线程与异步模块之间的工作。

事件循环机制

 

step1:主线程读取JS代码,此时为同步环境,形成相应的堆和执行栈;

step2:  主线程遇到异步任务,指给对应的异步进程进行处理(WEB API);

step3:  异步进程处理完毕(Ajax返回、DOM事件处罚、Timer到等),将相应的异步任务推入任务队列;

step4: 主线程执行完毕,查询任务队列,如果存在任务,则取出一个任务推入主线程处理(先进先出);

step5: 重复执行step2、3、4;称为事件循环。

执行的大意:

同步环境执行(step1) -> 事件循环1(step4) -> 事件循环2(step4的重复)…

其中的异步进程有:

a、类似onclick等,由浏览器内核的DOM binding模块处理,事件触发时,回调函数添加到任务队列中;

b、setTimeout等,由浏览器内核的Timer模块处理,时间到达时,回调函数添加到任务队列中;

c、Ajax,由浏览器内核的Network模块处理,网络请求返回后,添加到任务队列中。

任务队列

如上示意图,任务队列存在多个,同一任务队列内,按队列顺序被主线程取走;不同任务队列之间,存在着优先级,优先级高的优先获取(如用户I/O);

3.1、任务队列的类型

    任务队列存在两种类型,一种为microtask queue,另一种为macrotask queue。

    图中所列出的任务队列均为macrotask queue,而ES6 的 promise[ECMAScript标准]产生的任务队列为microtask queue。

            

3.2、两者的区别

    microtask queue:唯一,整个事件循环当中,仅存在一个;执行为同步,同一个事件循环中的microtask会按队列顺序,串行执行完毕;

    macrotask queue:不唯一,存在一定的优先级(用户I/O部分优先级更高);异步执行,同一事件循环中,只执行一个。

3.3、更完整的事件循环流程    

将microtask加入到JS运行机制流程中,则:

step1、2、3同上,

step4:主线程查询任务队列,执行microtask queue,将其按序执行,全部执行完毕;

step5:主线程查询任务队列,执行macrotask queue,取队首任务执行,执行完毕;

step6:重复step4、step5。

microtask queue中的所有callback处在同一个事件循环中,而macrotask queue中的callback有自己的事件循环。

简而言之:同步环境执行 -> 事件循环1(microtask queue的All)-> 事件循环2(macrotask queue中的一个) -> 事件循环1(microtask queue的All)-> 事件循环2(macrotask queue中的一个)...

利用microtask queue可以形成一个同步执行的环境,但如果Microtask queue太长,将导致Macrotask任务长时间执行不了,最终导致用户I/O无响应等,所以使用需慎重。

示例、验证 

            console.log('1, time = ' + new Date().toString())setTimeout(macroCallback, 0);new Promise(function(resolve, reject) {console.log('2, time = ' + new Date().toString())resolve();console.log('3, time = ' + new Date().toString())}).then(microCallback);function macroCallback() {console.log('4, time = ' + new Date().toString())} function microCallback() {console.log('5, time = ' + new Date().toString())}     

运行结果如下:

1

2

3

5

4

运行结果与预期一致,验证了在不同类型的任务队列中,microtask queue中的callball将优先执行。

    总结:由此我们了解事件循环的机制,同时了解了任务队列、JS主线程、异步操作之间的相互协作;同时认识了两种任务队列:macrotask queue、microtask queue,它们由不同的标准制定,microtask queue对应ECMAScript的promise属性(ES6)和 DOM3的MutationObserver,文中说明了两者在事件循环中的运行情况及区别;在今后的异步操作中,通过灵活运用不同的任务队列,提升用户交互性能,给出更加的响应和视觉体验;同时,通过JS的事件循环机制,可以更清楚JS代码的执行流,从而更好的控制代码,更有效、更好的为业务服务。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu下安装cmake,配置ITK 和 SimpleITK, VTK(已测试可执行)

curses库 在安装cmake之前应该先安装一下curses库。如果系统中有curses库的话,cmake将生成一个可执行文件ccmake,它是一个基于文本程序的终端,有点类似windows GUI。 sudo apt-get install libncurses5-dev 备注:若无curses库…

定义[nextTick、事件循环]

详情清查收:---》 实例理解nextTick的使用,并给出在页面渲染上的优化巧用 https://www.cnblogs.com/hity-tt/p/6729118.html

世界坐标与图像坐标

1. 右手坐标系 2. 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方。这样就建立了一个左手坐标系。拇指、食指和其余手指分别代表x,y,z轴的正方向。判断方法:在空间直…

module.exports与exports,export与export default之间的关系和区别

CommonJS模块规范和ES6模块规范完全是两种不同的概念。 CommonJS模块规范: 根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。 CommonJS规范规定&#xff0…

Ubuntu下安装 imagej 和 Fiji

安装ImageJ 方法一 sudo apt-get install imagej whereis imagej imagej -version 方法二 下载 Linux版本的 imagej 安装 Instructions cd /home mkdir imagej cp ij150-linux64-java8.zip /home/imagej unzip ij150-linux64-java8.zip 建立软连接,可以在终端…

vue的diff 算法

1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要…

Ubuntu中python调用SimpleITK来显示图像

misc.imshow ipython import os from scipy import misc dataDir os.environ["HOME"] "/Downloads/SimpleITK-MICCAI-2001-Tutorial-master/Data" print dataDir image misc.imread(dataDir "FA.png") misc.imshow(image) 或者 ipython i…

Websocket--- long loop--ajax轮询

Websocket--- long loop--ajax轮询,long poll 和 ajax轮询 的原理。 1,首先是 ajax轮询 ,ajax轮询 的原理非常简单,让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。 2,long poll 其实原理跟 ajax轮询 差不多…

Linux下设置环境变量

单独查看PATH环境变量,可用: echo $PATH11 方法一:在用户主目录下的 profile或 bashrc文件 sudo gedit ~/.profile 或者 sudo gedit ~/.bashrc123123 可以在此文件末尾加入PATH的设置如下: export PATH”$PATH:your path1:you…

前端解决一像素问题

一、transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框 首先用伪类创建边框 .border-bottom{position: relative;border-top: none !important; }.…

Python缩进问题

Python缩进问题 Python中,是通过代码的缩进,来决定代码的逻辑的。通俗的说,Python中的代码的缩进,不是为了好看,而是觉得代码的含义,上下行代码之间的关系。缩进弄错了,就会导致程序出错&#…

Ubuntu下安装Pycharm及相关设置

下载 Pycharm 社区版本 http://www.jetbrains.com/pycharm/download/#sectionlinux 安装指导 Copy the pycharm-community-2016.2.3.tar.gz to the desired installation location (make sure you have rw permissions for that directory) cp /home/bids/Downloads/pycha…

Python 编码规范 PEP 8

PEP 8 – Style Guide for Python Code 详情可查看官网 https://www.python.org/dev/peps/pep-0008/ 用于查看python代码是否符合风格. sudo apt-get install pep8 使用 pep8 --youfile.py 可以得到以下输出 test2.py是自己写的一个文件): test2.py:1:11: E401 multipl…

NIPS 2016 Highlighted Papers

今天看到NIPS官网开放了部分录用文章的Spotlight Videos,迫不及待撸了一遍,特别将一些有趣、有料的highlight出来分享给大家。文章链接均为油管视频,戳前请翻墙(排名不分先后,但根据自己的兴趣在每篇文章后用“★”标记…

深度学习所有文章

所有文章(持续更新中): 聊聊语音识别的发展历程 说说重要的贝叶斯公式吧 我对入门深度学习的切身体会 聊聊隐马尔科夫模型(HMM) 关于防止过拟合的一些想法 我与数据打交道(一) 我与…

朱松纯:初探计算机视觉三个源头兼谈人工智能

朱松纯 加州大学洛杉矶分校UCLA统计学和计算机科学教授(Song-Chun Zhu;www.stat.ucla.edu/~sczhu) 杨: 朱教授,你在计算机视觉领域耕耘20余年,获得很多奖项,是很资深的研究人员。近年来你又涉足认知科学、…

视觉研究的前世今生(上)王天珍(武汉理工大学)

视觉是人类最重要的知觉,没有视觉人类很难定位,识别物体,了解坏境,得以生存发展。20世纪两次世界大战,使得西方各国,不论是为了飞机安全着陆,还是导弹精确制导,都对视觉研究有了非常…

视觉研究的前世今生(中)王天珍(武汉理工大学)

视觉研究的前世今生(三) 王天珍 3 空间知觉 3-1概述 学术界一致同意空间知觉是视觉的最高层次,也是视觉中最抽象,最难以理解的。众所周知。物体上一点发出的光线落到视网膜上只是一个点,但我们怎么能单凭视觉知道物体的…

看了数百个PPT封面,我只想告诉你这两个套路!

做PPT离不开的一个词就是封面,封面即门面,很大程度上决定了你的作品给人的第一印象。 我们经常能够在网上看到一些大神做的封面,比如阿文、珞珈,非常酷炫。 这类封面也许不需要太多技巧,但一定是花了很多心思并且需要…

caffe 框架梳理(待续)

本文更多资料来源于罗韵北京深度学习资料和Ian Goodfellow的书籍《Deep Learning》 链接: http://pan.baidu.com/s/1jIRJ6mU 提取密码:xehi caffe:全称Convolutional Architecture for Fast Feature Embedding,是一个计算CNN 相关算法的框…