终于不得不优化性能了

性能优化,这个老生常谈的话题,谁面试的时候不得洋洋洒洒的说上个很多点。

但在实际运用中一开始却无从下手。网站卡顿,崩溃,怎么从表象中发现问题,解决问题,验证问题呢?

记录一下行之有效的性能优化方法。

1.选择测量工具

谷歌浏览器的任务管理器,开发者工具中的"性能","内存"面板,最好有一台配置不高的设备。

2. 确认问题

  • 打开网站,查看任务管理器中的内存占用空间,如果超过1G,很明显内存占用太大,很难不卡。理想的内存占用空间不要超过300M。当然这个数据是动态的,和交互操作有关,可以大概判断性能是否存在问题。

比如这种,高达3G,SOS!

  • 打开性能面板,点击录制,看看表现,时间可以适当延长,20s-60s。

同样很不对劲,黄色警告色块过大,主要体现在js执行耗时太多,也可以观察中间的几条线,如果一直增长没有回落,一定存在内存泄漏问题。

  • 打开内存面板,分时多次录制,检测是否存在内存泄漏

这一项还好,没有内存泄漏。由此可见,性能问题不一定都是内存泄漏。

以上是确认是否存在性能问题的方法。

分析定位问题

对于如何分析定位问题,我主要是在性能面板的耗时汇总里定位到主要问题点的,前端项目都是经过打包的,我的体验是很难定位到问题,仔细分析吧,看看有没有眼熟的文件或者函数。

解决问题

首先要解决的是确实造成很大影响的一个滚动插件,引起的dom频繁重绘,替换掉之后,网站运行时的内存占用空间直接减少了一半以上。趁这个机会,同时做了其他项目也适用的优化,主要是以下几点:

  • 压缩图片资源,并转为webp格式,大幅度减少图片资源体积

没有找到能够打包时自动转换的方法,用sharp手动批量转换的,也不算麻烦。

  • 对引起页面渲染的方法添加防抖,避免短时间内多次执行,dom操作一定要尽可能的少。
  • 将固定的大体积json文件缓存至localStorage,避免重复接口请求,提升用户交互速度

优化成果

  • 运行时的稳定内存占用量从1.3G降至550M
  • 高频操作时内存占用量从3G降至1.2G
  • 运行时性能js执行大幅度降低,空闲时间提高
  • 页面表现良好,解决了卡顿问题
相关推荐
EndingCoder7 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
代码老y13 小时前
Spring Boot项目中大文件上传的高级实践与性能优化
spring boot·后端·性能优化
前端极客探险家16 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
程序员岳焱19 小时前
Java 与 MySQL 性能优化:MySQL连接池参数优化与性能提升
后端·mysql·性能优化
星辰离彬19 小时前
Java 与 MySQL 性能优化:MySQL连接池参数优化与性能提升
java·服务器·数据库·后端·mysql·性能优化
麦兜*21 小时前
Spring Boot 企业级动态权限全栈深度解决方案,设计思路,代码分析
java·spring boot·后端·spring·spring cloud·性能优化·springcloud
zkmall2 天前
鸿蒙商城开发:ZKmall开源商城系统特性适配与性能优化
性能优化·开源·harmonyos
码农捻旧2 天前
前端性能优化:从之理论到实践的破局道
前端·性能优化
杰尼橙子2 天前
DPDK graph图节点处理框架:模块化数据流计算的设计与实现
网络协议·性能优化
悟道|养家2 天前
数据库性能优化指南:解决ORDER BY导致的查询性能问题( SQL Server )
数据库·性能优化