前端页面优化做的工作

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

相关推荐
嘟嘟071712 分钟前
前端异步编程完全指南:从json-server到DeepSeek大模型接口调用
前端
用户0595401744612 分钟前
大模型多轮对话“失忆”踩坑实录:一次线上事故让我排查了48小时,最终靠 Playwright + Pytest 把记忆锁死
前端·css
橘子星12 分钟前
前端薅数据神器 Fetch:不用翻墙,在线拿捏后端与 AI 接口
前端·后端
步步为营DotNet14 分钟前
探索.NET 11:Blazor 在跨平台客户端应用开发的进阶实践
前端·asp.net·.net
Hello馒头儿16 分钟前
vue3+uniapp经典hook方式实现一个更多加载的列表组件
前端·javascript·vue.js
浩风祭月17 分钟前
前端错误监控方案对比:Sentry SaaS vs 自部署 vs 纯开源组合
前端·openai·ai编程
ze_juejin18 分钟前
promise和try catch的比较
前端
用户5732400372319 分钟前
AgentForge-WX v0.3.0:12项更新 + 框架重新定位,把微信小程序AI对话的坑全填了
前端
米丘20 分钟前
HTTP 传输层 TCP 三次握手 / 四次挥手
前端·网络协议·http
小lan猫21 分钟前
多域 RAG 知识库:从 Vue 前端到 NestJS + PGVector 的全栈实践
前端·人工智能·typescript