前端项目性能优化是加分项，不论是在面试还是实际工作中，我们都需要掌握一些基础方法和技巧。

前端优化技巧

一个前端项目下通用的优化技巧：使用缓存、节流、压缩、按需加载、全局管理等方法或技巧。如下：

1. 避免频繁渲染更新，即使必须的情况下，
也需要考虑是否使用节流函数；

2. 对于长列表页面，考虑翻页加载、点击下一页、
使用虚拟长列表，避免数据量过大，渲染卡顿；

3. 统一控制项目中的定时器函数，避免
定时器偷跑；

4. 拆分Js文件，可考虑按需加载，提升
加载速度；

5. 保证首屏必要数据渲染，可增加过渡图片，
提升用户体验；

6. 对于后端接口多余数据可考虑清洗数据，
只保留必要数据；

7. 避免过多的数据请求，可考虑使用数据缓存，
提升用户体验；

8. 对于大图考虑CDN图片加载，也可考虑
图片懒加载；

9. 避免使用过多css选择器嵌套；

10. 代码文件gzip压缩等，服务器相关缓存配置；

React项目优化

可使用Chrome Lighthouse进行性能测评，根据测评结果也可以得出一些改进的点： react框架层面可以做的优化方向核心点：减少重新 render 的次数；减少计算的量，主要是减少重复计算。有下列具体方案：

1. 拆分公共组件和业务组件，根据具体业务分离，
降低组件颗粒度；

2. shouldComponentUpdate中拦截非不要渲染；

3. 对于简单的数据类型，可考虑使用
React.PureComponent；

4. 函数组件考虑使用React.meno，React.memo 
与 React.PureComponent 非常相似；
(版本React v16.8以上)

5. React Hooks组件使用useCallback缓存函数，
避免每次返回一个新的函数；
(版本React v16.8以上)

6. React Hooks组件使用useMemo缓存计算值；
(版本React v16.8以上)

希望以上可以帮助到你，想获取更多前端开发技巧，关注我！！