前端页面优化做的工作

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

相关推荐
java1234_小锋3 分钟前
【技术专题】HTML5 网页技术 - HTML5 列表标签
前端·html·html5
强二小哥帅4 分钟前
Kotlin 协程复习笔记
前端
不可能片场7 分钟前
工程实践 原子替换改了 ctime 怎么修
前端·electron
暧暧内含光8 分钟前
HTTP 文件传输体系全解:从协议标头、OSS 架构到流媒体分片
前端
静默回滚9 分钟前
浏览器能显示AVIF,却导不出一张AVIF
前端
小皮虾14 分钟前
小程序全局状态还能这么简单?只需初始化一次,页面自动同步
前端·javascript·微信小程序
用户8186180280018 分钟前
RESTful API 设计规范与版本演进
前端
补码缩写18 分钟前
前端AVIF编码开多线程快两三倍,speed调到8就不快了
前端
cidy_9822 分钟前
企业级 AI Agent 工作台前端实战教程
前端
deli00722 分钟前
换个 DNS 网速真的变快吗?解析 6 步逐跳实测,快慢差 45 倍
前端