Javascript执行机制(同步和异步)

JavaScript 语言的一大特色就是单线程，也就是说，同一个时间只能作一件事。

单线程就意味着，全部任务须要排队，前一个任务结束，才会执行后一个任务。这样所致使的问题是： 若是 JS 执行的时间过长，这样就会形成页面的渲染不连贯，致使页面渲染加载阻塞的感受。

// 如下代码会输出什么 
console.log(1);
 setTimeout(function () {
     console.log(3);
 }, 1000);
 console.log(2);
// 1
// 2
// 3
复制代码

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

一，同步任务

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。好比作饭的同步作法：咱们要烧水煮饭，等水开了（10分钟以后），再去切菜，炒菜。

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

二，异步任务

你在作一件事情时，由于这件事情会花费很长时间，在作这件事的同时，你还能够去处理其余事情。好比作饭的异步作法，咱们在烧水的同时，利用这10分钟，去切菜，炒菜。

JS 的异步是经过回调函数实现的。

异步任务有如下三种类型:

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

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

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

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

三，JS执行机制

1，先执行执行栈中的同步任务。

2，异步任务（回调函数）放入任务队列中。

3，一旦执行栈中的全部同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，因而被读取的异步任务结束等待状态，进入执行栈，开始执行。

四，代码验证

dom01

console.log(1);
 document.onclick = function() {
   console.log('click');
 }
 console.log(2);
 setTimeout(function() {
   console.log(3)
 }, 3000)
// 1
// 2
// 3 (3秒钟后打印3)
复制代码

dom02

var dom02 = function(i) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
for (var i = 0; i < 3; i++) {
    dom02(i);
};
console.log(i);
// 3 (先打印3)
// 0
// 1
// 2
复制代码