js异步编程和时间线

一，什么是异步

关于异步(async)的理解可以和同步(sync)来做比较，同步是当js引擎执行到js代码时等js代码执行完毕时，再执行后面的代码，而异步是在当前时间线多线程的执行多个任务，就好比执行ajax请求数据时，可以在ajax请求数据的同时，执行后面的任务，等请求数据完毕后，再回过头执行挂起的任务。

二，异步的好处

因为javascript这个语言是一个单线程的，执行一个任务都是等当前任务执行完毕后再次执行后一个任务，效率是非常的慢，而相比后台语言java,它是一个多线程语言，它需要处理线程间资源的共享问题，还要解决状态同步等问题，而javascript因为不是多线程的语言，但是可以用异步完美解决这一系列的问题，对于异步来说，当当前任务执行的时候，会放到一个任务队列里去等待js引擎去执行，当执行栈的所以任务执行完毕时，js引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。

三，异步编程

1，回调函数

就好比req.onreadystatechange属于事件回调，借由浏览器的HTTP请求线程发起对服务器的请求，在请求得到响应之后触发请求完成事件，将回调函数推入事件队列等待执行。
回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱，而且每个任务只能指定一个回调函数。

2，Promise
Promise规范属于es6中的，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解，在一些高版本的浏览器可以使用，
它的规范有以下几种

1. 三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
2. 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
3. promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
4. then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用，同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象
   最后在一些浏览器上面也要检测一下是否适用这个规范，代码如下
   

四，加载时间线

1，当创建Document对象时，开始解析web页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中，这个阶段是document.readyState = ‘loading’;
2，当遇到link外部css时，创建线程加载，并继续解析文档，
3，当遇到script外部js时，并且没有设置async和defer,浏览器加载阻塞，等js脚本解析完毕后，再继续解析文档
4，当遇到script外部js时，如果有设置async和defer,创建线程加载，并继续解析文档，对于有设置async的脚本，等脚本加载完毕后立即执行
5，当遇到img等，先正常解析dom结果，并异步加载src,并继续解析文档
6，当文档解析完成时，这个阶段变成了document.readyState = ‘interactive’
7，文档解析完毕后，所以的设置defer的脚本开始按顺序执行解析
8，document对象触发DomContentLoaded事件，此时程序的执行开始从同步脚本执行阶段变成事件驱动阶段
9，当所以的脚本解析完成，img解析完成后，此时的阶段变成了document.readyState = ‘complete’ , window对象触发onload事件
10，从此，异步响应式开始处理用户输入和网格事件等