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

1、前端性能影响因素：

定义：

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

浏览器显示页面基本原理：

获取 HTML 文档及样式表文件
解析成对应的树形数据结构
DOM tree
CSSOM tree
计算可见节点形成 render tree
计算 DOM 的形状及位置进行布局
将每个节点转化为实际像素绘制到视口上（栅格化）

影响页面性能的因素：

白屏

HTML 和 CSS 的加载及解析速度
<head> 内的脚本加载及执行
首屏

图片加载
<body> 内的脚本加载及执行
render tree 的构建
HTML 的复杂度
CSS 的复杂度
render tree 的绘制（栅格化）
颜色的复杂度
形状的复杂度
页面回流

2、前端性能工具（google Performance || google lighthouse）：

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

google lighthouse：

3、举例

查看第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的差

注意：

css3和canvas其实都非常强大，基于此次【红包雨】需求的两种方案实现都可行的情况下，才会调研使用哪一种；
那么两种方案分别有什么短板呢？个人总结：
如果需求要求动态配置动画速度等参数，不论性能如何，都需要使用canvas来实现；
如果需求要求操作3d的翻转等固定特效，不论性能如何，都需要使用css3来实现；
如果使用熟练，css3和canvas配合起来混合使用也是不错的方案

4、截图

canvas和css3实现的具体源码可以点击链接进入代码仓库： https://github.com/haohongyang1/RedEnvelopeRain

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

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

php微信红包雨效果,微信红包雨特效口令大全微信红包雨特效口令有哪些
微信红包雨特效口令有哪些?新年牛气冲天,在微信有一场大型的红包雨送给玩家.那么特效口令有哪些呢,下面小编给大家带来微信红包雨特效口令大全,一起来看看吧. 微信红包雨特效口令大全一.王者荣耀 [排位] ...
红包html页面,JavaScript Html实现移动端红包雨功能页面
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下实现效果如下: 具体代码如下 html部分: 红包雨 demo.css为初始化css,可以不加 index.c ...
如何实现PC端微信扫码授权(前端部分),常见错误redirect_uri参数错误解决
根据你 APPID 的来源,微信扫码有两种. 微信开放平台 : 常见的 PC 网页扫码登录微信公众平台 : 公众号授权准备工作无论使用哪一种方法都要先进入对应的平台,配置授权回调域名,这是必要的 ...
前端性能监控技术方案
前端性能监控主要考虑以下几个方面 1. 静态性能静态性能包括:包体积分析.lightHouse 2. 动态性能 (1)首屏:FMP.TTI.FCP.FP.满开比.秒开率.页面渲染数据时长 (2)卡顿 ...
PC端浏览器定位（纯前端）
浏览器定位 :这里用了两种 ,一种是Html5自带的方法另一种是引用了百度api ,百度api 的使用有三种: 1 浏览器定位 2 ip定位 3 SDK辅助定位引用百度api的前提是需要申请百度 ...
Vue实现移动端红包雨
<template><div><divclass="playBotn"@click="playPack">点我开始抢红包&l ...
js红包雨js特效代码
下载地址 js红包雨特效代码,原生JavaScript代码实现的红包雨效果, dd:
JS 实现红包雨效果，倒计时开红包兼容移动端
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下: JS代码 function randomNum(minNum, maxNum) {switch (argum ...
百万 QPS 前端性能监控系统设计与实现
作者:李振,腾讯云前端性能监控负责人什么是前端性能监控(RUM) 腾讯云前端性能监控 (RUM) 是一站式前端监控解决方案,用户只需要安装 SDK 到自己的项目中,通过简单配置化,即可实现对用户页面 ...