Web APIs 学习笔记（六）--- JavaScript同步和异步执行机制

一、单线程

​ JavaScript 的执行是单线程，也就是说同一时间只能做一件事，所以js的所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

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

二、同步任务和异步任务

​ JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

​ 同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。同步任务都是放到主线程上去按排列顺序去执行，形成一个执行栈。
​ 异步任务指的是：不进入主线程、而进入**”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行**。js的异步是通过回调函数实现的，所以，js的异步任务一般分为三种类型：① 普通事件，如 click、resize等 ②资源加载，如 load等 ③定时器，如 setInterval、setTimeout

三、JavaScript执行机制

​ js 的执行机制是 先执行主线程中的同步任务，并把同步任务中的回调函数（异步任务）放入到子线程的任务队列中。但同步任务执行完毕后，系统会去依次读取任务队列中的异步任务，加入到主线程的执行栈中，开始执行。然后执行栈的任务执行完毕后，会再次去读取任务队列中的异步任务，这种不断获得任务、执行任务、再获得、再执行的机制被称为事件循环（event loop）。

// 案例代码

// 1. 执行结果 1 2 3 定时器的回调函数是异步任务
 console.log(1);
 
 setTimeout(function () {
     console.log(3);
 }, 1000);
 
 console.log(2);

// 2. 执行结果 1 2 3 定时器的回调函数是异步任务
 console.log(1);
 
 setTimeout(function () {
     console.log(3);
 }, 0);
 
 console.log(2);

// 3. 执行结果 1 2 3 click 定时器的回调函数和click的回调函数都是异步任务
// click的位置取决于点击的时间 如果晚于定时器 则排在最后  早于定时器则排在第三位  
 console.log(1);
 document.onclick = function() {
   console.log('click');
 }

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