PC端红包雨特效之前端性能与技术选型

最新推荐文章于 2023-09-14 15:47:42 发布

^-^insect

最新推荐文章于 2023-09-14 15:47:42 发布

阅读量780

点赞数

分类专栏：技术文档文章标签：红包雨 canvas css3

本文链接：https://blog.csdn.net/heart_at_you/article/details/100937523

版权

8 篇文章 0 订阅

订阅专栏

前端性能，即页面性能，简单来说就是能看到页面内容的时间以及可以开始在页面上操作的时间。

推荐两个谷歌提供的性能监控工具，可根据工具获取当前页面的性能瓶颈
google Performance面板(原名 timeline面板)：

查看第4部分的图片后，针对图片进行性能分析；
分析：

比较两个图片中显示的饼形图内容，使用css3的优势要比 canvas明显一些，

CSS3主要是在计算 img标签的位置，所以用于Rendering的消耗较多；

canvas主要是用js在计算img标签在canvas画布中的位置，每一帧结束后都要重新计算，生成连贯的动画，所以用于Scriting和Painting的消耗较多。

比较两种Idle后，决定使用CSS3来做红包雨特效。

个人总结：两种方案整体优缺点比较；

代码量动态数据配置点击事件 fps

	代码量	动态数据配置	点击事件	fps
CSS3	代码整洁好维护	一些变量不可以动态配置不可以与js数据共用	容易捕捉标签的事件,做一些交互效果	同一屏幕中出现的标签密度较多时：fps<60较少标签时，运动效果流畅
Canvas	通过大量js计算完成动画效果，代码量是CSS3的3-5倍。后期代码不好维护	可以动态配置js变量，可根据持久化的数据来配置动画效果	通过点击位置和现有图片位置的比较，校验是否点击到了图片会有一些延迟，点击交互效果不是很好	一定范围内运动元素的多少与页面性能无太大关系window系统中 fps <60；流畅度体验比css3的好mac中 fps > 60且体验比css3的差

注意：

mac系统 canvas 红包特效 2-6s 之间性能截屏
mac系统 css3 红包特效 2-6s之间性能截屏
canvas和css3实现的具体源码可以点击链接进入代码仓库： https://github.com/haohongyang1/RedEnvelopeRain

可以直接运行查看效果，并且测试性能。

关注