浏览器的事件环机制 宏任务和微任务

进程事计算机分配任务和调度任务的基本单位

进程里面可以包含线程

js 是单线程 主线程师单线程 setTimeout 异步

// 同步和异步

浏览器事多进程

render渲染引擎

network javascript解析器 ui css

js和css是共用一个线程

在跑js的时候不能跑css

js代码在栈中执行

数据结构：

队列：先进先出

栈：先进后出

let arry = [1,2,3]

arr.push(4)

console.log(arr.shift())

函数调用栈

调用后的销毁

最内层函数先销毁 作用域的销毁和创建

异步的：

ajax

onclick

setTimeout

异步的回调放到队列里面

第一个放到栈中 先进先出

setTimeout(()=>{

console.log(1)

},0)

setTimeout(()=>{

console.log(2)

},0)

异步的方法再次分类

宏任务

 

setTimeout

setTimeout(()={

Promise.resolve().then(data=>{

cosnole.log('timeout1');

})

/下一个/setTimeout 和setTimeout中的微任务谁先执行呢

应该是setTimeout中的微任务先执行

遇到微任务先执行微任务 微任务青空后再执行宏任务

},0)

setTimeout

setTimeout(()={

console.log('timeout2)

},0)

微任务

promise.then

Promise.resolve().then(data=>{

cosnole.log(1);

})

promise.then

Promise.resolve().then(data=>{

cosnole.log(1);

})

promise.then

Promise.resolve().then(data=>{

cosnole.log(1);

})

微任务永远在宏任务之前执行

api将结果的回调放到两个队列中

宏任务队列

微任务对接

微任务全部执行完才会走宏任务

放在浏览器中执行

浏览器的事件环机制：

会先清空微任务（执行微任务）

// 取出一个宏任务执行，执行完后如果有微任务会再次清空微任务，

之后再取下一个宏任务

 

vue.nextTick

怎么实现的

宏任务和微任务

https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js

chrome setImmediate浏览器里面没有

IE里面有的一个方法

setImmediate 典型的宏任务 比setTimeout 还要慢

MessageChannel

let channel = new MessageChannel()

let port1 = channel.port1

let port2 = channel.port2

port1.postMessage('hello')// 发消息是异步的

port2.onmessgae = function(data){

console.log(data)

}

突变的监控

MutationObserver()

dom更新完的操作

let observer = new MutationObserver(function(){

console.log('插入完成')

})

 

observer.oberve(div,{childList:true})

MutationObserver()和promise.then 是微任务

webworker 归主线程管理

不能操作dom 也不能操作document body

H5的api

性能计算使用

worker.html里面饮入的

let worker = new Worker('./worker.js')

worker.postMessage()

worker.onmessage= function(data){

}

执行html时候执行和html同级