你在项目中是怎么做性能优化的

发布于 2022-7-28 18:11
浏览
0收藏

@toc

性能优化

1.代码层面

写代码的时候,厉害的人写出来的代码往往性能会更好,因为他们考虑的会更加地完善更加完美,我举个简单的例子吧,请看下面这段代码:

// 查询出users数组
const users: IUser[] = query(conditions)

// 查出names数组
const names = users.map(({name}) => name)
names.forEach((name, index) => {
  // do something...
})

return names

这段代码看着好像也没啥问题吧?但是其实加一步,会不会更好呢?当users是空数组的时候,就没必要再走下面的逻辑了,这样能减少很多代码的执行,从而提高性能

// 查询出users数组
const users: IUser[] = query(conditions)

// 加一步
if (!users.length) return []

// 查出names数组
const names = users.map(({name}) => name)
names.forEach((name, index) => {
  // do something...
})

return names

2.网络层面

其实网络层面之所以需要优化,是因为不是每一个用户的网速都很好的,所以网络层面也需要优化,减少网络请求消耗过多资源

咱们项目中很多的网络优化其实都做在axios的封装中,比如我做过的封装:

  1. 重复请求的取消:第一次请求还没回来之前,就进行了第二次同样的请求,这时候要把第二次请求给取消掉,防止重复请求
  2. 限制并发数量:比如你有十个请求,你真的就一次性把十个请求发出去吗?这样会大量消耗前端资源的,那如果一次只发两个,直到把十个都发完,会不会比较妥当呢?
  3. 限制重新请求的次数:在做请求失败重试的时候,最好限制一下重试次数,不然会一直重试,从而消耗大量资源
  4. 大文件分片上传:大文件尽量分片上传,并限制并发数
  5. 合理利用http缓存:这个是后端的事情,咱们只要知道就行

3.业务方面

业务方面,就需要你在做需求的时候,选择性能较好的方式去完成,我结合我项目中,想到了几点:

  • 1、防抖节流:这个是必须的,防止频繁触发事件
  • 2、事件解绑:组件销毁记得解绑事件,不然内存占用过多
  • 3、长列表优化:长列表的优化方式很多,比如懒加载、虚拟滚动、分页
  • 4、首屏时间优化:这个涉及到的很多,但是有一个点要注意,你是怎么计算时间的?这很重要~
  • 5、组件懒加载:用到了再加载,缩短加载时间
  • 6、减少组件渲染:使用一些hook,减少组件的重渲染

4.打包方面

打包方面其实就那么几个优化方式:

  • 1、减少打包的体积:压缩代码、资源体积
  • 2、缩短打包的时长:cache-loader、thread-loader
  • 3、CDN:请求资源快些

已于2022-7-28 18:11:30修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐