js 异步原理

同步JavaScript

要理解什么是异步 JavaScript ，我们应该从确切理解同步 JavaScript 开始。先看一个简单的例子 (运行它, and 这是源码)：

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  alert('You clicked me!');

  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

这段代码, 一行一行的顺序执行：

1. 先取得一个在DOM里面的 <button> 引用。
2. 点击按钮的时候，添加一个 click 事件监听器:
   1. alert() 消息出现。
   2. 一旦alert 结束，创建一个<p> 元素。
   3. 给它的文本内容赋值。
   4. 最后，把这个段落放进网页。

每一个操作在执行的时候，其他任何事情都没有发生 — 网页的渲染暂停. 因为前篇文章提到过 JavaScript is single threaded. 任何时候只能做一件事情, 只有一个主线程，其他的事情都阻塞了，直到前面的操作完成。

异步JavaScript

就前面提到的种种原因（比如，和阻塞相关）很多网页API特性使用异步代码，特别是从外部的设备上获取资源，譬如，从网络获取文件，访问数据库，从网络摄像头获得视频流，或者向VR头罩广播图像。

为什么使用异步代码这么难？看一个例子，当你从服务器获取一个图像，通常你不可能立马就得到，这需要时间，虽然现在的网络很快。这意味着下面的伪代码可能不能正常工作：

var response = fetch('myImage.png');
var blob = response.blob();
// display your image blob in the UI somehow

因为你不知道下载图片会多久，所以第二行代码执行的时候可能报错（可能间歇的，也可能每次）因为图像还没有就绪。取代的方法就是，代码必须等到 response 返回才能继续往下执行。

(摘自mdn)

 

总结来说，同步阻塞执行，异步暂时挂起，继续执行。在js中当主线程执行完毕，回去任务队列查看任务，若队列中有任务则执行，没有则继续执行主线程