@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：请求资源快些