js事件循环机制

js 是单线程，用event loop实现一些非阻塞的事件。

宏任务和微任务:

宏任务：
整体代码，
setTimeout，
setInterval,I/O操作

微任务：
new Promise().then()指里面的回调
nextTick

为什么要有微任务？只有宏任务可以吗？

宏任务就是先进先出,当有高优先级任务时，引入微任务。

node中的事件循环和浏览器的区别

node

区别

await 就相当于把函数放在promise里面，把后面的代码放在then里面
new primose里面也是一段宏任务，.then以后才是微任务

image.png

setTimeout并没把resolve返回出去，只有返回了，then才执行

image.png

image.png

promise
promise.all特性:接受一个数组。全部执行完后，输出结果。

里面不一定都是数组。
promise是在实例化的时候就执行完了，所以有的promise报错，也不影响其他promise输出。
平时await或then，只是为了拿到结果。

function PromiseAll(proArray) {
    return new Promise((resolve,reject)=>{
        if(!Array.isArray(proArray)) {
            return reject(new Error('输入数组'))
        }
        var len = proArray.length
        let count = 0
        var arr=[]
        for(let i=0;i<len;i++) {
            Promise.resolve(proArray[i]).then((res)=>{
                arr[i] = res
                count++
                if (count == len) {
                    resolve(arr)
                }
            }).catch(e => reject(e))
        }
    })
}

const pro1 = new Promise((res,rej) => {
    setTimeout(()=>{
        res('1')
    },1000)
})
const pro2 = new Promise((res,rej) => {
    setTimeout(()=>{
        res('2')
    },2000)
})
const pro3 = new Promise((res,rej) => {
    setTimeout(()=>{
        res('3')
    },3000)
})
const proAll = PromiseAll([pro1,pro2,pro3])
    .then(res =>
        console.log(res)
    )
    .catch((e) =>{
        console.log(e)
    })

promise 在每次实例化的时候已经执行了，做promise缓存。

算法

接雨水

image.png

前端优化
做优化的目的是什么？
哪个指标对业务有什么影响？
1 首屏时间
2 首次可交互时间
3

vue响应式原理

3个核心类：
1 observer
2 dep
3 watcher