向互联网大厂学习，从代码格式、代码错误、代码习惯、代码优化四个角度进行前端Code Review的具体细则实施。
一、代码格式
代码格式问题可以通过自动化工具来解决。
- VSCode格式化设置
- 标准的 eslint 规则( 如Airbnb或公司统一推出的eslint规则) + husky( 本地pre-commit校验 )
- 远端 CI 流水线校验（开启cache，增量校验）
二、代码错误
2.1 是否存在会导致内存泄露的代码
对于 SPA 应用，用户无需刷新浏览器，所以要想确保垃圾回收生效，我们需要在组件对应生命周期里做主动销毁。
- 存在不必要的全局变量且未及时解除引用
全局变量，除非你关闭窗口或者刷新页面，才会被释放，如果缓存大量数据，很可能导致内存泄露。
一般来说，直接绑定在vue实例上即可，组件销毁时该实例也会销毁；但没有绑定在vue实例上的一定要主动销毁。
- 闭包内部变量未被销毁
- 计时器是否及时清理
- 监听事件是否有解绑
- 第三方库的销毁函数，在页面卸载时也需要调用，比如EventBus：
- v-if 指令导致的内存泄露
2.2 异步操作是否有异常处理
- 异步操作拿接口请求来说，大家都知道的是，使用 promise 时要有.catch处理。但使用 async/await 时，有 .catch 处理的，也有try...catch处理的使用方法。这里推荐使用 .catch。原因在于：
- 可以控制接口请求出错后，**是否要阻塞后续业务逻辑执行**。
- .catch 里的 error 能明确知道是接口请求导致的错误，而**不需要再对 error 进行分类判断**，是接口200返回后的业务逻辑处理报错还是接口报错。
2.3 取值时是否进行了空判断、调用函数时是否进行了类型判断
2.4 存在无意义的 if else代码块或考虑漏的条件
2.5 存在无意义的 catch 代码块
2.6 是否含有安全风险的代码
2.7 硬编码
三、代码习惯
3.1 if-else嵌套不能超过4层
3.2 Don't repeat yourself
3.3 不要直接修改Object原型(或者Function, Array原型等)
3.4 回调嵌套不建议超过3层回调嵌套
3.5 函数不超过80行
3.6 通过代码展示逻辑，尽量减少注释与注释规范化
3.7 删除注释掉的无用代码
3.8 移除不必要的console.log调试日志
3.9 减少eslint-disable注释
3.10 使用空行对代码分组
3.11 命名规范
3.12 过多的非业务逻辑相关代码(如超过10行的上报, 参杂在业务逻辑里)
3.13 完善README文档，注意事项详细说明
3.14 尽量使用export而不是export default来导出，实现按需加载
四、代码优化
4.1 避免大量直接操作dom节点
4.2 避免使用delete
delete 操作符并不会释放内存，而且会使得附加到对象上的hidden class失效，让对象变成slow object。
（hidden class是V8为了优化属性访问时间而创建的隐藏类）
链接参考 https://juejin.cn/post/6844903918804172814
4.3 是否引用了不必要的npm包
4.4 尽量使用CDN地址的图片
4.5 可以使用CDN地址的第三方插件，减少包体积
4.6 频繁事件处理（查询等）使用防抖与节流
4.7 无限瀑布流等多元素事件绑定使用事件代理，减少内存使用
4.8 动画减少回流与重绘
使用transform代替left,top等值的改变
根据浏览器的渲染流程，如果引起元素位置大小的改变，需要重新进行布局计算，然后重新生成位图，交给GPU渲染展示
而transform的改变不会对元素的位置大小产生改变，而是使用已经生成的位图，对它进行旋转，缩放，移动。
