前端页面优化做的工作

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

相关推荐
Patrick_Wilson15 分钟前
幂等到底是什么?从前端视角讲透 SQL、HTTP 与 POST 接口的幂等设计
前端·后端·架构
凌览16 分钟前
一人公司别再上 Jenkins,真不值
前端·后端
oil欧哟21 分钟前
Codex 最佳实践(超级长文):先搞懂 AI,再用好 AI
前端·人工智能·后端
小小小小宇24 分钟前
前端渲染方式
前端
京东云开发者1 小时前
全球首个!京东全栈开源JoyAI-VL-Interaction,让大模型从“一问一答”走向“边看边说”
前端
京东云开发者1 小时前
正式上线!京东云AI智能渗透测试服务
前端
AprChell1 小时前
低代码设计器和低代码设计引擎架构综述
前端·vue.js·低代码
Hilaku2 小时前
Node.js 还能再战十年?给你一个不换引擎的理由
前端·javascript·程序员
颜进强2 小时前
AI性能参数-截断、延迟与流式输出
前端·后端·ai编程
spmcor2 小时前
React 架构师之路:Next.js 全栈革命(第八篇)
前端·react.js