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

本文共 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://okhea.baihongyu.com/

你可能感兴趣的文章
jvm 学习(一)
查看>>
JavaScript简介
查看>>
SQL Server附加数据库拒绝访问解决方法汇总
查看>>
SM2算法原理及实现
查看>>
RHCA教材翻译计划
查看>>
js-小括号在不同场合下的作用
查看>>
我的友情链接
查看>>
kvm中虚拟机的硬盘扩容
查看>>
Android (Launch Mode) 四种启动模式
查看>>
透视学理论(二)
查看>>
Dubbo/HSF在Service Mesh下的思考和方案
查看>>
Django form表单
查看>>
CTYL-9.14(tomcat端口与阿里云安全组,域名与tomcat配置,域名与反向代理)
查看>>
Java 多线程相关问题记录
查看>>
LNMP架构介绍、MySQL安装、PHP安装、 Nginx介绍
查看>>
简单的Spark+Mysql整合开发
查看>>
阿里java面试经验大汇总(附阿里职位需求)
查看>>
Python全套零基础视频教程+软件2018最新编程视频!
查看>>
内存管理之1:x86段式内存管理与保护模式
查看>>
20180925上课截图
查看>>