博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入浅出任务队列机制,非常浅
阅读量:6449 次
发布时间: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://gmlwo.baihongyu.com/

你可能感兴趣的文章
ios的fouse失效?
查看>>
转:如何将 Java 项目转换成 Maven 项目
查看>>
YACEP相关技术工具服务技巧(上)
查看>>
《AngularJS开发下一代Web应用》读书笔记与感想
查看>>
URAL 2034 Caravans(变态最短路)
查看>>
正向代理到指定泛域名的nginx配置
查看>>
mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
查看>>
wordcloud + jieba 生成词云
查看>>
关于“代码规范”,“Review”和“Check list”
查看>>
Xcode导入第三方库图文
查看>>
第八章 函数
查看>>
MySQL快速入门
查看>>
个人vim配置
查看>>
Ubuntu 14.04 mame sound fix
查看>>
修改mysql的root密码
查看>>
Spring Boot系列——如何集成Log4j2
查看>>
对称加密实现重要日志上报Openresty接口服务
查看>>
10. Regular Expression Matching
查看>>
C# 实现天气预报
查看>>
ios中键盘处理(二)
查看>>