前端页面优化做的工作

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去看页面的性能评分,尽量把影响性能分数低的模块解决掉(本地和测网是有差别的,最好在测网去检测评分)

相关推荐
勿芮介8 小时前
【大模型应用】在window/linux上卸载OpenClaw
java·服务器·前端
摸鱼仙人~8 小时前
前端面试手写核心 Cheat Sheet(终极精简版)
前端
Ashley_Amanda8 小时前
深入浅出Web Dynpro:SAP企业级Web应用开发全面解析
前端
方安乐8 小时前
概念:前端工程化实践
前端
kyriewen8 小时前
Flexbox 完全指南:从此告别浮动,拥抱一维战神
前端·css·html
xChive8 小时前
ECharts3D图表 | 3D柱状图和3D饼图实现思路
前端·3d·echarts
HookJames8 小时前
解决Claude Code v2.1.74 官方找不到模型的问题-终结版
前端·chrome
代码煮茶8 小时前
Vite 工程化实战 | 从 0 配置一个企业级前端项目(按需引入 / 环境变量 / 打包优化)
前端·vue.js
程序员Sunday8 小时前
5000 字长文,全网最细的OpenClaw(小龙虾)架构拆解,我建议你认真看完
前端·人工智能
踩着两条虫8 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(九):双向代码转换之处理事件、Props 和指令
前端·vue.js·ai编程