专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端项目性能优化提升,你知道那些?

ins518 2024-11-27 15:05:08 技术文章 11 ℃ 0 评论

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

前端优化技巧

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

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以上)

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

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表