前端页面优化做的工作

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

相关推荐
hunterandroid14 小时前
RecyclerView 进阶:DiffUtil 与列表更新
前端
_codeOH14 小时前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
the_answer14 小时前
CSS 新时代:浏览器原生能力如何重塑前端开发范式
前端
不会写DN14 小时前
固定背景图不随页面滚动的完美方案
前端
天蓝色的鱼鱼14 小时前
Vite 8 换上 Rolldown 后,前端构建真的会快很多吗?
前端·vite
梦曦i14 小时前
全面解析uni-router v1.2.0功能
前端·uni-app
Yiyaoshujuku14 小时前
化学谱图数据API接口,数据字段一览!
linux·服务器·前端
雮尘15 小时前
LangGraph 与 LangSmith 入门教程(JS/TS 版)
前端·人工智能·langchain
英勇无比的消炎药15 小时前
新手必看玩转TinyRobot一定要避开这些坑
前端·vue.js
持敬chijing15 小时前
Web渗透之前后端漏洞-文件上传漏洞-过滤绕过与配置文件漏洞-条件竞争漏洞
前端·安全·web安全·网络安全·网络攻击模型·安全威胁分析