同步
同步
同步是代码从上到下依次执行，上一个任务结束后，才能执行下一个任务。
如下图所示，任务1执行完后，再执行任务2，任务2执行完后再执行任务3，依次类推...
同步优势
同步是任务有序进行，不会造成资源上处理上的混乱。
1.任务有序进行较好的处理了任务之间的依赖性，如后一个任务需要前一个任务的结果。
2.如果多个任务处理同一个资源，不会造成资源处理的混乱。
var a = 1;
function task1(){
console.log(a);
for(var i = 0; i <10000;i++){
a++;
}
console.log(a);
}
function task2(){
console.log(a);
for(var i = 0; i <10000;i++){
a--;
}
console.log(a);
}
task1();
task2();
task1、task2都操作变量a。先执行task1， 执行完 task1后得到一个a的结果值。然后task2处理task1处理的结果值。
如果task1与task2不是同步的，task1没有执行完，去执行task2，task2执行一会，再去执行task1，... ，可能a的值都不是task1、 task2想要的结果。
同步弊端
同步上从上到下依次执行的，必须等到上个任务完成，才能处理下一个任务。如果上一任务占用的时间比较长，会让下一个任务长时间等待。
异步
异步
1.任务不是按照顺序依次执行的。
2.不等到上个任务执行完，执行下个任务。
如果前一个任务没有执行完，下一个任务可能已经开始，下一个任务执行一段时间，又去执行上一个任务...，看起来像多个任务同时执行。
如下图所示，任务1执行一段时间后，去执行任务2，然后再执行任务1，再执行任务2，执行任务3。任务1与任务2不是按照顺序执行的，各自占用一段时间执行，好像任务1与任务2，同时执行的。
异步优势
异步不用等待上一个任务执行完，就可以执行下一个任务，不用较长时间等待上一任务完成。
异步弊端
如果使用异步 处理同一个资源，可能造成资源的混乱。如上面的task1、 task2共同处理a值。
js引擎使同步与异步协作
js引擎在解析javascript时，同时使用了同步与异步的思想。
同步
线程是CPU独立运行和独立调度的基本单位（可以理解为一个进程中执行的代码片段），进程是资源分配的基本单位（进程是一块包含了某些资源的内存区域）。浏览器中有多个线程协作共同完成前端界面的展示。
js引擎是单线程的，从上到下依次执行代码，依次处理任务。这样不会导致资源的混乱。浏览器是根据DOM树来显示页面元素的，如果一个任务处理DOM,另外一个任务也在处理DOM,那么就会造成处理DOM混乱。
如下图所示，任务A处理DOM一段时间，然后任务A停止处理DOM，任务B开始处理这个DOM,任务B处理DOM停止，任务A继续处理DOM。那么任务A接收的不是自己处理DOM的预期结果，而是任务B处理后的结果。
如下代码规规矩矩从上到依次执行，先执行A任务，A任务执行完了再执行B任务。保证资源的处理不会混乱。
var num = 1;
function A(){
num = 2;
}
function B(){
num = 3;
}
A();
B();
如果上一个任务执行时间比较长，导致下一个任务不能执行，导致浏览器卡顿怎么办？
如网络请求数据，网络请求数据的过程用的时间比较长，就需要一直等待网络资源的请求，直到请求完成。这样会让后面的执行等待很长时间。为此，浏览器使用了基于异步的事件驱动的处理。
异步
javascript引擎线程从上到下依次执行javascript代码（回调不执行）。回调被其他线程（事件触发线程、计数器触发线程）触发后，放入一个异步队列中。
即浏览器是把上一个任务未完成的部分（作为子任务）存起来，继续执行下面的任务当浏览器空闲时，再去处理未完成的部分。这样既能保证任务能够顺序执行，又不会因为上一个任务时间过长，导致下个任务需要长时间等待。
线程间执行是异步的，回调被触发时，可能javascript引擎线程正在从上到下执行代码，也可能已经执行完毕。
javascript引擎线程从上到下执行完代码后，开始查找异步队列中是否有任务，如有任务则按照队列的顺序依次执行任务。
$(document).ready(function(){ $('div').click(function(){ console.log('click'); }) }) setTimeout(function(){ console.log('timer'); },100); var count = 0; setInterval(function(){ count++; console.log('inter'+count); },1000);
打印结果：
图1 异步队列
100ms后，计时器触发线程触发回调，把回调放入队列中；每个1000ms周期，计时器触发线程触发回调，Iterval的回调放入队列中；点击div时，事件触发线程触发回调，事件的回调放到队列中。若引擎线程空闲，依次执行队列中的任务。
异步编程方式
异步编程方式：发布/订阅(事件触发、回调函数)、promise(ES6)、async函数(ES6)。
发布/订阅
浏览器实现
1.ajax
通过ajax请求网络资源，网络资源返回以后，就会触发预先写好的回调函数，并且把回调函数任务放入执行队列中，当该回调函数在队列第一个并且js引擎执行队列时，该回调函数执行。
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = callback;
function callback(){
if(xmlhttp.readySate == 4){
if(xmlhttp.status == 200){
//...
}
}
}
2.setTimeout、setInterval
setTimeout(callback,time)
该方法的含义是time时间后把callback放入异步队列，当该函数在队列头，并且js引擎执行该队列时，此回调函数执行。
setTimeout(function(){
var a = 1;
},0),
0毫秒后把回调函数放入异步队列。
3.addEventListener
elem.addEventListener('click',callback,false);
当点击elem元素时，把callback放到异步队列。
开发者实现
开发者自己通过发布／订阅 实现异步。
var taskQueue = [];
//订阅
function subscribe(task){
taskQueue.push(task);
}
//发布
function publish(){
for(var i = 0; i < taskQueue.length; i++){
taskQueue[i]();
}
}
subscribe(function(){console.log(1)});//订阅
publish();//发布
Promise
Promise是ES6定义的规范，需要浏览器去实现。
promise有3种状态：pendding, resolve, reject。
每个promise某一时刻只能有其中的一种状态，pending为初始状态，并且pendding只能一次转向resolve或reject状态。
可通过then方法注册将要执行的任务，这个任务什么时候执行，由promise的状态转换时间决定。
var promise = new Promise(function(resolve,reject){
setTimeout(resolve,100);//100ms后resolve放入异步队列
});
//promise由pending状态转为resolve状态，执行第2个参数的函数；
//由pending状态转为reject状态，执行的第2个参数的函数
promise.then(function resolve(){console.log(alert('resolve');},function reject(){alert('reject')});
async函数
async function print(value,time){
await timeout(time);//异步任务 当这个任务完成后，才能继续向下执行
console.log(value);
}
function timeout(time){
new Promise(function(resolve){
setTimeout(resolve,timeout);
}));
}
print('hi',100);
100ms后输出'hi'
综上：
(1)发布/订阅(事件触发、回调函数)、promise(ES6)思想是先注册一个任务，但不知道这个任务什么时候执行，需要合适的时间去执行这个任务。
(2)async函数管理异步任务的上下执行顺序，异步执行完后，继续执行后面的代码。