目录

前言

1、“单线程”理解

2、“单线程”缺点

3、“单线程”的改进———同步异步的诞生

一、同步异步

1、同步的理解

2、“异步”的理解

3、两者的本质区别

二、javascript执行机制

1、同步任务的常见语句

2、异步任务的常见语句

3、执行顺序

四、结束语

前言

在理解同步与异步之前，我们有必要了解它诞生的使命是什么———解决javascript作为“单线程语言”的一些缺点。

1、“单线程”理解

我们对js 必须清楚它的一大特点是“单线程”，通俗理解就是同一时间只能做一件事。javascript诞生的使命也是如此。

举个栗子：我们对DOM元素进行添加和删除操作，不能同时进行，要先添加，后删除！多线程语言举例：java。

2、“单线程”缺点

所有任务都要排队执行，其中一个js执行时间过长，会造成页面渲染不连贯，有种页面渲染加载阻塞的感觉。

3、“单线程”的改进———同步异步的诞生

HTML5提出了Web Worker 标准，允许js脚本创建多个线程，于是就出现“同步”和“异步”。

一、同步异步

1、同步的理解

同单线程道理一样，就是前一个任务完成后再执行下一个任务，也就是程序的执行顺序和任务的排列顺序是一样的。

举个栗子：我们平常做家务时，其中两件事——晾衣、洗碗同步做法是：先等洗衣机把衣服洗干净（至少45分钟）— 晾衣服—洗碗。

js脚本便是如此，如果按同步执行程序，一下代码结果会是：132，我们运行验证一下

console.log(1);
        setTimeout(function(){
            console.log(3);
        },5000);
        console.log(2);

显然电脑结果不是这样，为什么？这其中就是异步起作用了！

2、“异步”的理解

如果这个流程中，有一件事需要等很长时间，那么这时候，我们还可以利用时间同时处理其他事件。 小糖个人认为这大概就是多线程吧？

举个栗子：还是上面做家务，它的异步做法可以是：在等洗衣机洗干净衣服同时，我们可以利用这段时间，开始洗碗。

3、两者的本质区别

两者的本质区别就是：同一流水线上各个流程的执行顺序不同，那么在javascript中它的执行机制是怎样的呢？

二、javascript执行机制

该机制分为两个：一个执行栈，一个任务队列：将同步任务放在主线程执行，形成一个执行栈；异步任务则是通过回调函数实现的。

那么具体什么语句才是同步任务，什么才异步任务呢？

1、同步任务的常见语句

console.log(1);
setTimeout(fn,0);
alert(xxx);
等等诸如此类可以放在执行栈中的直接执行语句。

2、异步任务的常见语句

一般而言，异步任务有以三种类型

（1）普通事件，如click、resize等。
（2）资源加载，如error、load等。
（3）定时器，如setInterval、setTimeout等。

一般来说，我们只要看到function() {}，之类的，可以确定它是异步任务了，美滋滋！

3、执行顺序

js优先运行执行栈中全部的同步任务，再按次序读取任务队列中的异步任务，即异步任务进入执行栈开始运行

最后附上js执行过程图

 由于主线程不断执行任务，再读取任务，放到执行栈执行，再读取，再执行，这种机制成为事件循环（event loop）。

四、结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 谢谢各位~