前端页面优化做的工作

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

相关推荐
LiuMingXin1 分钟前
断网也能装包? 我在物理隔离内网搭了一套完整的私有npm仓库
前端·面试·npm
CHU7290357 分钟前
趣味抽赏,解锁惊喜——扭蛋机盲盒抽赏小程序前端功能解析
前端·小程序
开开心心就好8 分钟前
Word批量转PDF工具,仅转换不合并很实用
java·前端·人工智能·edge·pdf·语音识别·模块测试
孫治AllenSun10 分钟前
【redis】redis重新创建集群
前端·javascript·redis
卡皮巴拉c9915 分钟前
基于 wujie.js 进行微前端融合
前端
来碗疙瘩汤16 分钟前
深入解析 Vue 包:`vue` 究竟导出了什么?
前端
我命由我1234517 分钟前
React - ref、回调 ref 回调执行次数的问题、createRef 函数、事件处理
前端·javascript·react.js·前端框架·html·html5·js
我命由我1234518 分钟前
React - 收集表单元素、收集表单元素优化、生命周期(旧)、生命周期(新)
前端·javascript·react.js·前端框架·html·html5·js
SuperEugene19 分钟前
Monorepo + pnpm workspace 落地实操:Vue 中后台多项目 / 组件库 / 公共包管理|Vue 工程化篇
前端·javascript·vue.js·pnpm·vite·monorepo
We་ct20 分钟前
JSX & ReactElement 核心解析
前端·react.js·面试·架构·前端框架·reactjs·个人开发