博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入浅出任务队列机制,非常浅
阅读量:6634 次
发布时间:2019-06-25

本文共 907 字,大约阅读时间需要 3 分钟。

前言

众所周知,js是单线程的,就像我们不能一边刷牙一边洗脸(或许有些大佬真的可以),那么单线程如何才能规划调度好要做的任务呢?

这个时候就要介绍一下这个任务机制了~

任务种类

  • 宏任务

clipboard.png

  • 微任务

clipboard.png

注意:浏览器环境和node环境是不一样的,本文只讨论浏览器环境

规则

执行一个宏任务(先执行同步代码)-->执行所有微任务-->UI render-->执行下一个宏任务-->执行所有微任务-->UI render-->

根据HTML Standard,一轮事件循环执行结束之后,下轮事件循环执行之前开始进行UI render。即:macro-task任务执行完毕,接着执行完所有的micro-task任务后,此时本轮循环结束,开始执行UI render。UI render完毕之后接着下一轮循环。但是UI render不一定会执行,因为需要考虑ui渲染消耗的性能已经有没有ui变动

需要注意的是,微任务是有优先级的,就如同上面的表格从上往下一样,nextTick>Promise>MutationObserver.

  • 那么宏任务有没有优先级呢??

大部分浏览器会把DOM事件回调优先处理 因为要提升用户体验 给用户反馈,其次是network IO操作的回调,再然后是UIrender,之后的顺序就难以捉摸了,其实不同浏览器的表现也不太一样,这里不做过多讨论。

clipboard.png

来道经典题目

console.log('script start');setTimeout(function() {  console.log('setTimeout');}, 0);Promise.resolve().then(function() {  console.log('promise1');}).then(function() {  console.log('promise2');});console.log('script end');

答案是

'script start'、'script end'、'promise1'、'promise2'、'setTimeout'
先走完所有同步代码-到promise微任务-宏任务setTimeout

转载地址:http://fwdvo.baihongyu.com/

你可能感兴趣的文章
Android 蓝牙开发
查看>>
Android内存泄漏杂谈
查看>>
tiny4412开机动画、开机界面的定制 【原创】
查看>>
centos7通过yum安装mysql,并授权远程连接
查看>>
2.2优化编译器的能力和局限性
查看>>
Linux之 手动释放内存
查看>>
Android零基础入门第58节:数值选择器NumberPicker
查看>>
贪心算法-跳跃游戏二
查看>>
python 3使用binascii方法的报错解决
查看>>
C++11 自动推导auto
查看>>
linux wa%过高,iostat查看io状况
查看>>
二层交换机交换容量和包转发率计算
查看>>
Android Media (Audio) Framework 多媒体系统框架
查看>>
Web开发环境搭建 Eclipse-Java EE 篇
查看>>
评论观点抽取
查看>>
jQuery 效果 - slideToggle() 方法
查看>>
Python pyQt4/PyQt5 学习笔记3(绝对对位,盒布局,网格布局)
查看>>
每个人都应该懂点函数式编程
查看>>
eval(data)和eval("("+data+")")的区别
查看>>
Java RMI详解
查看>>