JavaScript-----同步异步与js的执行机制

前言

 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用剧户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

    单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任多。这样所导致的问题是∶如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。


一、同步是什么?

前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的

    同步任务是一行一行执行

    前一个任务执行完毕后才会执行下一个任务

二、异步是什么?

 不同的任务不会相互等待

这里提两个问题:

1.思考一下会输出什么

    console.log(1); //同步任务
    setTimeout(() => {
        console.log(3); //异步任务
    }, 1000000);
    console.log(2); //同步任务

 答案是:123

2.思考一下会输出什么

    console.log(1); //同步任务
    setTimeout(() => {
        console.log(3); //异步任务
    }, 0);
    console.log(2); //同步任务

 答案是:123

通过这两道题我们可以得知 

定时器是异步任务,在同步任务完成后再完成,即使是0秒

如图:

三.区别

1.同步任务和异步任务的本质区别:执行顺序不同

🍓同步任务:

同步任务都在主线程上执行,形成一个执行栈

🍓异步任务:

  •     JS的异步是通过回调函数实现的。
  •     一般而言,异步任务有以下三种类型
  •     1、普通事件,如click、resize等
  •     2、资源加载,如load、error等
  •     3、定时器,包括setInterval、setTimeout等
  •     异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)


四.js执行机制

  1.  1.先执行执行栈中的同步任务
  2.  2.异步任务(回调函数)放入任务队列中。
  3.  3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

 这里还有一道题:

推测一下输出结果是什么?

    console.log(1);
    document.onclick = function () {
        console.log('click');
    }
    console.log(2);
    setTimeout(function () {
        console.log(3);
    }, 3000)

 首先我们得知先执行同步任务,答案1是如果我们不点击click就不会再异步任务中打印出来,最后点击打印就会在定时器三秒后打印出来

答案2:是在三秒之前打印出来了click事件

js执行机制图:


由于主线程不断的重复获得任务,执行任务,再获取任务,再执行,所以这种机制被称为事件循环(event op)

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值