如何做前端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.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的改变不会对元素的位置大小产生改变，而是使用已经生成的位图，对它进行旋转，缩放，移动。