1、前端性能影响因素:
定义:
前端性能,即页面性能,简单来说就是能看到页面内容的时间以及可以开始在页面上操作的时间。
浏览器显示页面基本原理:
- 获取 HTML 文档及样式表文件
- 解析成对应的树形数据结构
DOM tree
CSSOM tree - 计算可见节点形成 render tree
- 计算 DOM 的形状及位置进行布局
- 将每个节点转化为实际像素绘制到视口上(栅格化)
影响页面性能的因素:
-
白屏
HTML 和 CSS 的加载及解析速度
<head> 内的脚本加载及执行 -
首屏
图片加载
<body> 内的脚本加载及执行 -
render tree 的构建
HTML 的复杂度
CSS 的复杂度 -
render tree 的绘制(栅格化)
颜色的复杂度
形状的复杂度 -
页面回流
推荐大家学习一下 RAIL模型
2、前端性能工具(google Performance || google lighthouse):
推荐两个谷歌提供的性能监控工具,可根据工具获取当前页面的性能瓶颈
google Performance面板(原名 timeline面板):
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
可以直接运行查看效果,并且测试性能。