网站首页 > 技术文章 正文
前端项目性能优化是加分项,不论是在面试还是实际工作中,我们都需要掌握一些基础方法和技巧。
前端优化技巧
一个前端项目下通用的优化技巧:使用缓存、节流、压缩、按需加载、全局管理等方法或技巧。如下:
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以上)
希望以上可以帮助到你,想获取更多前端开发技巧,关注我!!
- 上一篇: 这些前端项目性能优化方法你还不知道吗?
- 下一篇: 前端项目性能优化-面试题
猜你喜欢
- 2024-11-27 前端开发:Web性能优化有哪些方法?
- 2024-11-27 前端如何优化?
- 2024-11-27 广州蓝景技术分享—前端开发技术性能优化篇
- 2024-11-27 折腾不止前端工程与性能优化
- 2024-11-27 「技术干货」前端性能优化——快速定位代码BUG
- 2024-11-27 性能up!面向前端开发人员的14个JavaScript代码优化技巧
- 2024-11-27 web前端性能优化细节概括
- 2024-11-27 Web前端开发进阶:Web前端性能优化详解
- 2024-11-27 Web前端开发人员必知的性能优化技巧
- 2024-11-27 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)