vite优化性能/前端性能/性能优化

优化背景

根据业务需求,我进行了一个大屏的开发,这个大屏需要加载地图文件,通过script的方式引入地图的文件库,同时大屏上还有很多图片需要加载,本地调试的时候是正常的,但是放到线上环境,发现在没缓存的情况下,图片会太大,会影响JS的导入,导致地图加载报错,基于这个背景,我做了性能的优化。

问题排查

这个问题是运维人员发现的,他发现在无痕模式,会有页面出不来的问题,我通过调试工具,发现是地图加载报错,然后通过打断点,发现地图请求的时间就10S,而这个地图文件是8M,在没缓存的情况下,这个文件加载到了10S的时候也就5M左右,在有缓存的情况下,能达到8M,本来时间是够的,但是由于大屏上面有一个10M的图片要一起加载,就会导致加载不完成,从而报错。 总结了一下,性能问题主要存在以下几个方面:

  • 地图文件加载时间太短,对网络要求高,容易加载的时间不够
  • 图片没压缩,图片太大,占用网络并且加载时间太长

解决方案

根据上面存在的问题,我主要做了以下的解决方案:

  • 修改地图文件加载超时的时间,从10S改成20S
  • 对图片、视频、css等文件进行压缩

对于第二点解决方案,并且基于vite,我找了几个常用的压缩方案

  • vite-plugin-minipic:图片压缩方案
  • vite-plugin-compression2:其他文件的压缩方案

具体的配置如下

js 复制代码
plugins: [
    vue(),
    WindiCSS(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    minipic(),
    // 就是使用这个插件实现的文件压缩
    compression({
      threshold: 2000, // 设置只有超过 2k 的文件才执行压缩
      deleteOriginalAssets: false, // 设置是否删除原文件
      skipIfLargerOrEqual: true // 如果压缩后的文件大小与原文件大小一致或者更大时,不进行压缩
      // 其他的属性暂不需要配置,使用默认即可
    })
  ]

性能优化衍生

除了压缩图片,当然还有一些老生常谈的优化方案,具体哪些方案适合当前的项目,还是要从具体的项目出发。还有如下几个常用的性能优化方案:

  • 代码优化:防抖、节流、虚拟列表、懒加载、按需加载、经常调整和重构代码等
  • 浏览器相关优化:减少重构、重排、HTTP优化等
  • 文件优化:压缩文件、合并文件等

性能评估标准

对于性能的优化效果,也有一些评估标准:

  • 首屏时间:FP(first-paint),从页面加载开始到第一个像素绘制到屏幕上的时间。其实把 FP 理解成白屏时间也是没问题的。
  • 白屏时间:FCP(first-contentful-paint),从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标,"内容"指的是文本、图像(包括背景图像)、<svg> 元素或非白色的 <canvas> 元素。
  • 响应时间:
  • 渲染时间:LCP(largest-contentful-paint),从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间。LCP 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
  • 交互响应时间:点击页面发生交互,从点击开始到事件的响应时间。

总结

通过解决大屏的BUG,让我重新学习了性能优化方案,以及性能评估标准。

相关推荐
小袁拒绝摆烂2 小时前
SQL开窗函数
android·sql·性能优化
小何好运暴富开心幸福6 小时前
分层架构的C++高并发内存池性能优化
c++·性能优化·架构
麦兜*18 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
Jinkxs18 小时前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
数据狐(DataFox)21 小时前
存储过程封装:复杂业务逻辑的性能优化
性能优化
文艺倾年1 天前
【八股消消乐】浅尝Kafka性能优化
分布式·性能优化·kafka
杰尼橙子1 天前
DPDK性能优化实践:系统级性能调优的方法论与实战(一套通用的方法论)
性能优化·架构
EndingCoder2 天前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
代码老y2 天前
Spring Boot项目中大文件上传的高级实践与性能优化
spring boot·后端·性能优化
前端极客探险家2 天前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化