前端页面优化做的工作

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

相关推荐
小黑的铁粉14 小时前
什么是事件循环?调用堆栈和任务队列之间有什么区别?
前端·javascript
小黑的铁粉14 小时前
常见的内存泄漏有哪些?
前端·javascript
喝水的长颈鹿14 小时前
JavaScript 基础入门
前端
喝咖啡的女孩14 小时前
call、apply、bind 原理与实现
前端
雨落Re14 小时前
从设计到开发,过年我用十天使用AI搭建了一个完整的博客系统
前端·后端
冴羽14 小时前
100s 带你了解 Bun 为什么这么火
前端·node.js·bun
Sylvia33.14 小时前
火星数据:解构斯诺克每一杆进攻背后的数字语言
java·前端·python·数据挖掘·数据分析
Wect14 小时前
LeetCode 530. 二叉搜索树的最小绝对差:两种解法详解(迭代+递归)
前端·算法·typescript
掘金一周14 小时前
2026 春晚魔术大揭秘:作为程序员,分分钟复刻一个 | 掘金一周 2.26
前端·人工智能·后端
兴芳14 小时前
Tencent Cloud Captcha
前端