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)