background-image 与 img 动画性能对比
开发H5常常会用到滑屏，目前大部分滑屏插件都是通过控制页面的transform属性来实现。尽管如此，我总是发现自己的H5滑动起来就是不如网上一些优秀案例流畅，表现为滑动动画会出现卡顿、跳帧。
后来我发现自己的一个习惯，就是在页面需要插入图片的时候，我总是用background-image来实现，即使是一个独立的图片而非sprite图片的场景下，因为css的background-image实在是太方便了，不仅能够拉伸、偏移，还能上下居中和左右居中，而img标签的话还得自己计算偏移量，所以养成插图片就用background-image的习惯。
然而，渲染出来的页面虽然是一样的，性能表现却相差很多...
测试方法：3页的滑屏页面，每个页面有相等数量的div或者img元素，每个元素做360度匀速旋转，元素数量可调节，测试background-image和img场景下的页面性能表现。
请戳demo：background-image与img动画性能对比.html
扫二维码：
测试结果：
PC端：以chrome为例，每个页面100个元素情况下Timeline截图如下
background-image场景：
img场景：
从fps的Timeline可看出：PC端在使用background-image场景下性能优于img场景，表现为fps更稳定且均值更高。
移动端： 以Android微信浏览器为例，在每个页面10个元素的情况下已能看出明显的差别，不同于PC端，移动端不管是在页面滑动时还是单纯页面旋转时，img场景都优于background-image场景。
结语：
相信大家做H5开发时都是在PC端上开发调试，等到调试得差不多了才转到手机上测试（大神请忽略），但这就会有两个问题，
一是PC毕竟性能比手机高出很多，只在PC上调试会掩盖很多页面性能的短板，到手机上跑的时候这些短板就会表现出来，而这时候页面已经开发的差不多了，不熟悉不同页面之间的性能差异的话很难定位得到问题；
二是本文的测试结果所表示的，同样的页面在手机和PC上表现完全相反，PC端调试的结果不能代表最终在手机上的结果，开发者要根据不同的情况有所取舍。
PS:本文只是对background-image和img两种插入图片的方式进行简单的性能研究，因测试环境有限，如有不严谨或不对的地方欢迎吐槽，或者有不同的观点或IOS的测试结果也欢迎分享，谢谢大家~
转载于:https://www.cnblogs.com/dantis/p/6544559.html
background-image 与 img 动画性能对比相关推荐
- canvas 擦除动画_帧动画的多种实现方式与性能对比
作者: 前端向朔 from 迅雷前端 本文目录 Web 动画形式 应用场景 素材准备 实现方案 一.GIF 图 二.CSS3 帧动画 三.JS 帧动画 方案总结 注意事项 总结 Web 动画形式 首先 ...
- 帧动画的多种实现方式与性能对比
文章目录 Web动画形式 应用场景 素材准备 实现方案 一.GIF图 二.CSS3帧动画 三.JS帧动画 方案总结 注意事项 总结 Web动画形式 首先我们来了解一下Web有哪些动画形式 1. CSS ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- html盒子移动动画代码,详解盒子端CSS动画性能提升
流畅动画的标准 理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms. ...
- 微信小游戏 - 小游戏 vs H5 游戏性能对比和分析
这是个人关于微信小游戏系列文章的第三篇,在这系列文章里会描述 -- 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行: 对小游戏在 Android 平台的运行时架构进行分 ...
- 前端逐帧动画性能探究和比较
什么是逐帧动画? 首先看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简单的来说就是: 以一定的速度切换几张连续图像,让它动起来 ...
- 浏览器性能对比测试方法与评价模型研究
1. 引言 浏览器是检查.传递和展现万维网上信息资源的一个软件[1],运行客户电脑上,用来显示WEB服务器或文件系统中的HTML文件.[2]信息资源有可能是网页.图片.视频等,但每一个信息资源都由一个 ...
- Java常用消息队列原理介绍及性能对比
消息队列使用场景 为什么会需要消息队列(MQ)? 解耦 在项目启动之初来预测将来项目会碰到什么需求,是极其困难的.消息系统在处理过程中间插入了一个隐含的.基于数据的接口层,两边的处理过程都要实现这一 ...
- golang连接postgresql too many client_MySQL和PostgreSQL压测性能对比
阅读使人充实,讨论使人敏捷,写作使人精确. >>> 压测业务场景文章属于互联网社区动态类场景核心功能压测案例.至于题目涉及的MySQL和PostgreSQL之间的关系,主要为业务选型 ...
最新文章
- instagram api java_如何在没有用户交互的情况下获得instagram access_token（新api）？...
- FPGA的设计艺术（14）使用函数和任务提升逻辑的可重用性
- Java类加载笔记（1）
- python环境未激活_关于conda使用环境未被激活问题
- asp.net模版页面的高级应用
- Windows Vista for Developers——第三部分补充：控件和桌面窗口管理器
- Leetcode 231. 2的幂 解题思路及C++实现
- 一些很有用的技术工具
- Python格式化输出的三种方式
- c语言矩阵乘积的几,c语言矩阵相乘
- SAP License：凭证冲销
- Linux Kernel 5.8 发布，华为内核代码贡献全球持续领先
- 关于jsp:include 动态引入的值传递问题（数据共享问题）
- R 语言之数据分析高级方法「GLM 广义线性模型」
- Atitit 团队工具链体系打造---提升团队效率的一些通用软件 attilax总结
- 《WinForm开发系列之控件篇》Item12 DateTimePicker(暂无)
- 在虚拟机中安装centos6操作系统，DHCP下克隆，再使用CRT软件进行远程登录
- 笔记：美团智能配送系统的运筹优化实战
- P2837 [USACO08FEB]Dining Cows B 题解
- 主引导扇区（MBR），分区表（DPT）及活动分区(DBR)