前端页面优化做的工作

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

相关推荐
weedsfly4 分钟前
语法糖褪去之后——Babel 转译产物中的 JavaScript 本貌
前端·javascript
JustHappy5 分钟前
「软件设计思想杂谈🤔」“切图仔”也能懂编译原理?框架源码也许没那么难。聊聊 Vue 的编译(上)
前端·javascript·vue.js
禅思院20 分钟前
路由性能高可用架构实战方案
前端·架构·前端框架
IT_陈寒37 分钟前
React状态更新总是不及时?你可能漏了这步批处理机制
前端·人工智能·后端
恋猫de小郭1 小时前
AI Agent 开发究竟是啥?如何用 AI 开发 Agent ?深入浅出给你一套概念
android·前端·ai编程
前端双越老师1 小时前
我开发 AI Agent 项目踩过的 5个坑
前端·agent·全栈
晓得迷路了1 小时前
栗子前端技术周刊第 134 期 - React Router v8、TypeScript 7 RC、React Native 0.86...
前端·javascript·react.js
Carson带你学Android1 小时前
Android 17 正式发布:AI 终于成了系统能力
android·前端·ai编程
Mike_jia1 小时前
ZbxTable:Zabbix开源报表神器,从运维数据到决策洞察的最后一公里
前端