你真的了解JavaScript的执行机制吗？

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

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

  console.log(1);
        setTimeout(function() {
            console.log('hello');
        }, 1000);
    console.log(2);

就比如这个函数，要想打印出来那个2，需要等到上面那个函数执行完才能执行，不过等一秒还好，你要是设为十秒，一百秒，谁愿意等待呢，是不是？

此时我们就引出了以下的概念：

同步和异步

为了解决这个问题，利用多核CPU的计算能力，HTML5提出 Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。

         同步
         前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法∶我们要烧水煮饭，等水开了( 10分钟之后），再去切菜,炒菜。
         异步
         你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

简单来说：同步就是下一件事必须等到上一件事做完才可以做，等到时间较长，而异步就是所有事可以一起做，等待时间较短。

 

         所以上面那个代码是这样的执行的，先把1和2先打印出来，然后再等个1秒钟，函数里面的内容被打印出来。

 

         虽然JavaScript属于单线程语言，但此时我们可以创建多个任务。

 

他们的本质区别:这条流水线上各个流程的执行顺序不同。

 

就比如这个案例：

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

你们以为的打印顺序是什么？132还是123？

 

对的，就是123，想要知道为什么？那我们就更需要去了解JavaScript的执行机制了

 

JavaScript为了防止我们的任务有一个排队，或者等待的时间较长的问题，把我们的任务分为两大类，第一类叫做同步任务，另一类叫做异步任务。

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

 function属于回调函数，不属于同步任务，回调函数属于异步任务

 

JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:

1、普通事件，如click、resize等

2、资源加载，如lodl、error等

3、定时器，包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列) 。

接下来我们就讲到核心部分了：JavaScript的执行机制：

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

 

 你可以理解为：在执行过程中，主车道上的车正常行驶，那个故障的车（回调函数）需要到应急车道上面维修（异步任务），修好了，才能到主车道上继续行驶

既然都已经看到这里了，那我再为大家介绍一个新的概念：事件循环

（这个东西我还没弄清楚，就不多做阐释了，放个图片大家看看吧）

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

---

 好了本文到这里就结束了，若是觉得博主写的有用的话，可否给个三连支持