vue学习--js代码执行机制简单

Promise概念

Promise对象用于表示一个异步操作的最终完成（或失败），及其结果值。

是一个对象 构造函数  new

 

//凡是 异步代码和定时代码 都会等待主程序执行完毕后再开始

//哪些事异步操作 1 定时器延时器2 ajax3 绑定的onclick事件函数，，，

 

//注意new promise会立刻执行 

console.log(1)
new Promise(function(resolve,reject){
    console.log(2)
})
console.log(3)

=->>123

//而.then需要异步执行
console.log(1)
let p1 = new Promise(function(resolve,reject){
    console.log(2)
})
p1.then(function(){
    console.log(3)
})
console.log(4)

=->>1243

 ##js代码执行机制

*所有同步任务都在主线程上的栈中执行。

*主线程之外，还存在一个“任务队列”（task queue） ，只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。

*一旦“栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，选择出需要首先执行的任务（由浏览器决定，并不按序）

##宏任务与微任务

1.MacroTask（宏观Task） setTimeout,setInterval,requestAnimatonFrame,I/O

2.MicroTask微任务 process nextTick Promise Object observe MutationObserver

3.先同步，再取出第一个宏任务执行 所有的相关微任务总会再下一个宏任务之前全部执行完毕 如果遇见就先微后宏

console.log(1)
setTimeout(function(){
    console.log(2)
},0)
new Promise(function (resolve){
    console.log('3')
    resolve();
}).then(function(){
    console.log('4')
})



-->1342

console.log(1);
setTimeout(function(){
    console.log(2)
    new Promise(function( resolve){
        console.log(3)
        resolve()
    
    }).then(function(){
        console.log(4)
    })

},0)

new Promise(function(resolve){
    console.log(5)
    resolve()
}).then(function(){
    console.log(6)
})

console.log(7)

--> 1576234

console.log(1);
//延时器 放到事件队列里面
setTimeout(function(){
    console.log(2)
    new Promise(function( resolve){
        console.log(3)
        resolve()
    
    }).then(function(){
        console.log(4)
    })

},0)
//promise new 立即执行 但是then会放到事件队列微任务
new Promise(function(resolve){
    console.log(5)
    resolve()
}).then(function(){
    console.log(6)
})

//延时器 放到事件队列里面 宏任务
setTimeout(function(){
    console.log(7)
    new Promise(function(resolve){
        console.log(8)      
    }).then(function(){
        console.log(9)
    })
    console.log(10)
})

console.log(11)

->1 5 11  //此时事件队列代码有一个then6 两个延时器setTimeout

->1 5 11  6 //此时事件队列代码有两个延时器setTimeout 两个0秒，先上再下  虽然里面有then 4 但是一个红任务里面必须会执行完微任务

-> 1 5 11 6 2 3 4 7 8 10 9