异步和同步的区别在哪_异步加载js的方式有哪些

什么是同步、异步？

同步：必须这件事情做完了才能进行下一件事情。
异步：不必要等这件事请做完，可以先干其他事情。

为什么JavaScript是单线程的？

主要原因就是避免dom渲染的冲突，因为JS可以访问dom节点且可对节点进行操作。比如：如果JS是多线程的，那么它在同一时刻就可以刚多件事情，假如A事件在对一个节点进行渲染，而B事件又想删除该节点，岂不是就产生了冲突，为了避免这种冲突，所以JS就被设计为单线程的，所以同一时间就只能干一件事情。

单线程意味着一个时刻只能干一件事情，那么遇到同步代码和异步代码，JS是怎么处理的呢？

首先JS有的主线程有一个执行栈和任务队列，同步任务会直接在执行栈中挨个执行，如果碰到异步任务就把异步任务加入任务队列，只有同步任务执行完了，才会通过事件循环的机制去任务队列挨个执行异步任务。
JS中的异步任务：
1.定时器都是异步操作。
2.事件绑定（实质就是回调）。
3.网络请求。
4.promise.then中函数
看代码：

{ 
   
    setTimeout(() => { 
   
        console.log(1);
    }, 0);
    console.log(2);
}

输出结果：2 1
为什么等待0s不是输出 1 2呢？
因为定时器是异步操作，所以JS它会先执行同步代码，就先执行log（2）,然后没有了同步任务，就去任务队列执行异步任务，所以最后输出1.

宏任务和微任务

宏任务：主要包括：script(整体代码)，setTimeout，setInterval，setImmediate，I/O，ui rendering。
微任务：主要包括：process.nextTick， Promise，MutationObserver（html5新特性）。
js异步有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入事件队列，然后在执行微任务，将微任务放入事件队列，这两个队列不是同一个。
当往外拿的时候而是，微任务先出队列。然后再是宏任务。
看代码：

{ 
   
    setTimeout(() => { 
   
        console.log(1);
    }, 1000);
    
    new Promise((resolve) => { 
   
        console.log(2);
        resolve()
    }).then(() => { 
   
        console.log(3);
    })

    setTimeout(() => { 
   
        console.log(4);
        new Promise((res) => { 
   
            console.log(5);
            res()
        }).then(() => { 
   
            console.log(6);
        })
    })
}

输出：2 3 4 5 6 1
首先看有几个大的部分：2个setTimeout、一个Promise。
setTimeout是宏任务，Promise是微任务，所以，是微任务先出队列，则先看Promise，一个Promise可分为2部分，一个同步和一个异步，Promise主体是同步的代码，然后.then的函数时异步的，所以先输出2再输出3，这时候微任务已经没了，剩下2个一样的宏任务，首先看第一个要等待1s再执行，而后面的不用等待，则先执行，里面又是一个Promse，再进行对其拆分然后输出：4 5 6，这时候就剩最后一个setTimeout，就最后输出1.
所以输出结果是：2 3 4 5 6 1。

今天的文章异步和同步的区别在哪_异步加载js的方式有哪些分享到此就结束了，感谢您的阅读。