Promise，async，事件loop

window.οnlοad=function(）{
}
页面中所有的元素加载完成后所执行的函数（所有DOM加载完成，CSS样式应用，图片加载完成后）
逐条执行（head—link，（css）同步------- script标签（同步）-----执行script-------》body------》img(video,audio）异步完成--------》完成所有DOM加载---------》link的CSS应用给DOM元素-----》所有内容完成）

async

异步函数，返回一个Promise
异步加载，不再等待加载完成后再执行下个标签。
如果加载时，使用async,就不能再加载其他
图片加载时异步
defer所有内容加载完成后。
（脚本加载拥塞会造成图片和link停止加载，不会恢复link和图片的加载）

Promise

let a=0;
let pro=new Promise(promiseHandler)
function promiseHandler(resolve,reject){
if(a>0){
resolve();
}else{
reject();
}
}
两个 参数
resolve：成功时执行的语句
reject：失败时执行的语句
手写：

  class Promises {
        constructor(fn) {
            this.state = "pending";
            fn(this.resolve.bind(this), this.reject.bind(this))
        }
        resolve(value) {
            if (this.state !== "pending") return;
            this.state = "resolve";
           let ids= setTimeout(() => {
                this.fn1(value);
                clearTimeout(ids);
            });
        }
        reject(value) {
            if (this.state !== "pending") return;
            this.state = "reject";
            let ids= setTimeout(() => {
                this.fn2(value);
                clearTimeout(ids);
            })
        }
        then1(fn1, fn2) {
            this.fn1=fn1;
            this.fn2 = fn2;
        }
        catch1(fn2){
            this.fn2=fn2;
        }
    }
    console.log("aaa");
    new Promises(function (resolve, resject) {
        resolve("a");
        resject("d");
        console.log("bbb");
    }).then1(function (a) {
        console.log(a);
    }, function (b) {
        console.log(b);
    })

一个一个加载

Promise.all静态方法
所有的异步完成后

await：将异步转换为同步等待
必须在async函数中，
可以让某个异步先完成后，再继续同步执行后面的，包括循环。

事件loop

let定义的变量限于花括号内部
var 循环体外

事件抛发的先后顺序
抛发时是同步的，什么时候抛发就什么时候执行。
加载的先后顺序（load）
js当前的同步加载完后再执行

所有的异步是在同步完成后执行的
三种异步{
load（error）
宏任务（setTimeOut，setInterval）(下一个任务列的最顶端)
微任务(Promise, async, await) (当前任务列的最低端，----最后执行)
}
在同一任务列中 先宏再微
整个任务序列流中，先微再宏（当前任务完成再执行下一个任务）
new promise是同步执行，then下面的是异步执行

setTimeOut比promise 下面的setTimeout要早
宏任务下面的微任务，要比宏任务早
并行的两个微任务，上一个微任务完成后，执行下一个。
微任务里的微任务优先于当前的异步

134652

1,2,18,19,3，5,4,9,10,11,17，20,13,12,6,7,16,8,15,14，

console.log(1);
new Promise(function (res,rej) {
    console.log(2);
    res();
}).then(function () {
    console.log(3);
    Promise.resolve().then(function () {
        console.log(5);
        setTimeout(function () {
           console.log(6);
           Promise.resolve().then(function () {
               console.log(7);
           });
           setTimeout(function () {
               console.log(8)
           },0);
        },0)
    })
}).then(function () {
    console.log(4);
});
setTimeout(function () {
    console.log(9);
    new Promise(function (res) {
        res();
        console.log(10);
    }).then(function () {
        console.log(11);
    })
});
Promise.resolve().then(function () {
    setTimeout(function () {
       Promise.resolve().then(function () {
           console.log(12);
       });
        console.log(13);
    },0)
});
setTimeout(function () {
    setTimeout(function () {
        setTimeout(function () {
            Promise.resolve().then(function () {
                console.log(14);
            });
            console.log(15);
        });
        console.log(16);
    });
    console.log(17);
});
console.log(18);
new Promise(function (res) {
    console.log(19);
    setTimeout(function () {
       console.log(20);
    },0)
})

321

 <script>
           console.log(111)
          setTimeout(function(){
           console.log(555);
           new Promise(function(resolve,reject){
           console.log(666)
             resolve()
        }).then(function(){
            console.log(777)

        })
        },0)
        

        new Promise(function(resolve,reject){
        console.log(222)
        resolve()
        }).then(function(){
        console.log(444)
        })    
        console.log(333)
        
    </script>