JS的异步执行机制[‘宏任务‘,‘微任务‘]

1.简介同步异步

首先 我们要知道的是 javascript 是一个单线程语言 js的任务需要排队执行 如果一个任务耗时过长 后边的任务需要等待 比如说我们浏览的新闻页面 新闻包含的超清图片加载很慢 总不能一直卡着直到图片完全加载结束 所以将任务分成了两类。

  1. 同步任务
  2. 异步任务

1.同步任务,当我们打开网站时 网站的骨架和渲染过程就是同步任务
2.异步任务,而加载图片、音乐之类的任务就是异步任务

js中运行机制主要有三条路

1.主线程 也就是同步操作
2.宏任务 包含定时器 事件函数 ajax
3.微任务 包含promise async await axios
异步操作和单线程是相辅相成的 js是一门单线程脚本语言 所以需要异步来辅助

js执行顺序

在代码执行的时候同步和异步任务会进入不同的执行场所 同步操作进入主线程 异步操作进入event table 并注册函数
当指定的事件完成时,evevnt table 会将这个函数移入任务队列 event queue 主线程的任务执行完毕为空时
就去任务队列event queue读取对应的函数 进入主线程执行

上述的过程会不断重复 这个过程也就是我们常说的event loop事件循环

js异步另一个机制

就是遇到宏任务 会先执行宏任务 将宏任务放入任务队列event queue 然后再执行微任务 将为任务放入微任务队列
(micro task queue) 但是这两个queue不是同一个queue 开始执行的时候 先从微任务队列取出这个回调函数
然后再从宏任务queue拿宏任务的回调函数

以下为演示代码

	//同步阻塞代码
	 console.log('确定前');
	 alert('不点击alert的确定按钮不会执行下面的代码')
	 console.log('确定后');
		//执行顺序代码
      async function asy1() {
            console.log(3);
        }
        async function asy2() {
            await asy1()
            console.log(5);
        }
        asy2()
        console.log(2);
        new Promise((resolve) => {
            console.log(1);
            resolve()
        }).then(() => {
            console.log(4);
        })
        console.log(6);
        //打印结果为3,2,1,6,5,4

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值