前端页面优化做的工作

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

相关推荐
前端一课13 小时前
【前端每天一题】 第 15 题:CSS 水平垂直居中高频方案(Flex / Grid / transform 等)
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 19 题:什么是重排(Reflow)和重绘(Repaint)?有什么区别?如何减少?
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 14 题:Promise.then 链式调用执行顺序
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 18 题:防抖和节流是什么?区别是什么?如何实现?
前端·面试
前端一课13 小时前
【前端每天一题】第 16 题:数组去重高频方法(Set / filter / reduce / 对象键值法)
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 17 题:什么是浅拷贝与深拷贝?如何实现深拷贝?
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 20 题:从输入 URL 到页面渲染全过程
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 12 题:== 与 === 的区别?为什么 [] == ![] 是 true?
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 13 题:原型链查找规则是什么?为什么对象能访问到方法?
前端·面试
前端一课13 小时前
【前端每天一题】🔥 第 11 题:this 的指向规则(前端高频必考题)
前端·面试