高级前端该掌握的知识点

事件循环（Event Loop）

          事件循环其实就是一个入栈和出栈的循环，事件循环分宏任务和微任务。

          宏任务：script setTimeout, setInterval, setImmediate, I/O, UI rendering

          微任务：process.nextTick, Promises, Object.observe, MutationObserver

          每一次循环先执行微任务后执行宏任务。tip：Promises是同步执行异步回调所以then,

          catch才是微任务。

new的实现原理

         创建一个空对象

         新对象被执行 __proto__ 连接

         使该对象继承构造函数prototype上的属性和方法

         返回一个新对象

深拷贝的实现

     简单的方法可以通过JSON.parse();JSON.stringify()来实现。

     也可以通过递归循环来实现（juejin.cn/post/684490…）

函数柯里化

    柯里化就是把多个传参改成单个传参

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum); 
const res = curriedSum(1)(2)(3) 
console.log(res); // 6

const log = (a, b, c) => {
    console.log(a, b, c);
};
const curriedLog = curry(log);
curriedLog('a')('b')('c'); // a b c

浏览器的缓存机制

  浏览器缓存主要分强缓存和协议缓存

  juejin.cn/post/684490…

防抖和节流

  防抖：在规定时间内点击会重新计算你点击的时间

let time = 0
debounce(fn, wait) {    if(time !== null)       clearTimeout(time);      time = setTimeout(fn, wait);}

  节流：在规定时间内只触发一次

        let time = 0	
        throttle(fun, wait) {
	  let now = Date.now() //当前时间戳
	  if (now - time > wait) {
		fun()
		time = now
	  }
	}

快排的实现

const quickSort = arr => {
    if (!arr.length) return
    const MEDIANINDEX = Math.floor(arr.length/2)    
    const MEDIAN = arr.splice(MEDIANINDEX,1)[0]    
    let left=[],right=[]    
    arr.map((item, index) => {
        if(item > MEDIAN) {
            right.push(item)
        } else {
            left.push(item)
        }
    })
    return [...quickSort(left), ...[MEDIAN], ...quickSort(right)]
}
quickSort([3,5,8,6,3,2,9,1,10])

前端的捕获和上报

juejin.cn/post/684490…

Async/Await让你的代码更简洁

async _payOrder() {
    const res = await api.home()
    if (res.code === 200) {
    }
}

浏览器的回流与重绘

juejin.cn/post/684490…

骨架片的使用

在平时的开发都是使用loading进行页面等待非常不美观，其实可以使用骨架片来进行预加载处理。可以通过webpack插件进行配置html-webpack-plugin

最后欢迎大家来补充！