当前位置: 首页 > news >正文

前端页面优化做的工作

1.分析模块占用空间

new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)()

2.使用谷歌浏览器中的layers,看下有没有影响性能的模块,或者应该销毁没销毁的


3.由于我们页面中含有很大的序列帧动画,所以会导致页面性能低,卡顿等问题,CSS3 动画可以通过 GPU 加速来提高性能,但是在大规模元素上使用时会存在性能问题。Canvas 可以用于绘制复杂的图形,由于它的渲染机制和硬件加速,所以具备很好的性能。
使用canvas结合requestAnimationFrame解决动画的性能问题
4.压缩图片这个是必须的
5.图片预加载和静默加载,把必须首屏渲染的图片放在首页的loading里面去预加载。
其他的图片在进入页面后慢慢加载
5.我们用的技术栈是vue3,用了异步组件defineAsyncComponent去加载组件
6.非必要的不要直接用setup去检测数据
7.使用谷歌浏览器的lighthouse去看页面的性能评分,尽量把影响性能分数低的模块解决掉(本地和测网是有差别的,最好在测网去检测评分)

http://www.lryc.cn/news/278477.html

相关文章:

  • Spark六:Spark 底层执行原理SparkContext、DAG、TaskScheduler
  • 关于鸿蒙的笔记整理
  • 【漏洞复现】先锋WEB燃气收费系统文件上传漏洞 1day
  • MYSQL篇--锁机制高频面试题
  • 创建一个郭德纲相声GPTs
  • 靶机实战(10):OSCP备考之VulnHub Tre 1
  • 在windows11系统上利用docker搭建linux记录
  • swift对接环信sdk
  • 单片机中的PWM(脉宽调制)的工作原理以及它在电机控制中的应用。
  • css 怎么绘制一个带圆角的渐变色的边框
  • Kotlin DSL C++项目引入OpenCV异常处理
  • 【微服务】 Spring cold、Kubernetes、Service mesh
  • 【scala】编译build报错 “xxx is not an enclosing class“
  • vue3+ts+vite项目从0 搭建,配置安装router/pinia/element-plus/scss等
  • 华为OD机试 - 矩阵匹配(Java JS Python C)
  • 使用ffmpeg实现音频静音修剪
  • Java项目调试实战:如何高效调试Spring Boot项目中的GET请求,并通过equalsIgnoreCase()解决大小写不一致问题
  • Google Pixel 与 iPhone手机:哪个更好?
  • ddos攻击会让服务器受到什么影响?-速盾网络(sudun)
  • NSSCTF Interesting_include
  • IPv6路由协议---IPv6动态路由(OSPFv3-5)
  • GPT Store开业大吉:一场AI技术与创新的盛宴
  • Linux---gcc编译
  • 使用阿里云镜像创建一个Spring Boot项目
  • 工智能基础知识总结--词嵌入之Word2Vec
  • redis stream restTemplate消息监听队列框架搭建
  • 【期末不挂科-C++考前速过系列P1】大二C++第1次过程考核(3道简述题&7道代码题)【解析,注释】
  • 游戏开发中,你的游戏图片压缩格式使用ASTC了吗
  • 【PostgreSQL】数据查询-概述
  • element input组件自动失去焦点问题解决