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,让我重新学习了性能优化方案,以及性能评估标准。

相关推荐
颜如玉14 小时前
HikariCP:Dead code elimination优化
后端·性能优化·源码
DemonAvenger1 天前
NoSQL与MySQL混合架构设计:从入门到实战的最佳实践
数据库·mysql·性能优化
Pu_Nine_92 天前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
文人sec2 天前
性能测试-jmeter9-逻辑控制器、定时器压力并发
测试工具·jmeter·性能优化·模块测试
鼠鼠我捏,要死了捏3 天前
RocketMQ 高可用集群原理深度解析与性能优化实践指南
性能优化·消息队列·rocketmq
李游Leo3 天前
JavaScript事件机制与性能优化:防抖 / 节流 / 事件委托 / Passive Event Listeners 全解析
开发语言·javascript·性能优化
不想被吃掉氩3 天前
MySQL的性能优化。
数据库·mysql·性能优化
DemonAvenger3 天前
数据库日志系统深度解析:从binlog到redo/undo日志的实践指南
数据库·mysql·性能优化
努力的小郑4 天前
MySQL索引(四):深入剖析索引失效的原因与优化方案
后端·mysql·性能优化
陈言必行4 天前
Unity 性能优化 之 静态资源优化 (音频 | 模型 | 纹理 | 动画)
unity·性能优化·游戏引擎