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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值