盒子端 CSS 动画性能提升研究

不同于传统的 PC Web 或者是移动 WEB,在客厅盒子端,接大屏显示器下,许多能流畅运行于 PC 端、移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意。

基于此,对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以提升的方法。

流畅动画的标准

理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms。

直观感受,不同帧率的体验

帧率能够达到 50 ~ 60 FPS 的动画将会相当流畅,让人倍感舒适;

帧率在 30 ~ 50 FPS 之间的动画,因各人敏感程度不同,舒适度因人而异;

帧率在 30 FPS 以下的动画,让人感觉到明显的卡顿和不适感;

帧率波动很大的动画,亦会使人感觉到卡顿。

盒子端动画优化

在客厅盒子端,Web 动画未进行优化之前,一些复杂动画的帧率仅有 10 ~ 30 FPS,卡顿感非常明显,带来很不好的用户体验。

而进行优化之后,能将 10 ~ 30 FPS的动画优化至 30 ~ 60 FPS,虽然不算优化到最完美,但是当前盒子硬件的条件下,已经算是非常大的进步。

盒子端 Web 动画性能比较

首先先给出在盒子端不同类型的Web 动画的性能比较。经过对比,在盒子端 CSS 动画的性能要优于 Javascript 动画,而在 CSS 动画里,使用 GPU 硬件加速的动画性能要优于不使用硬件加速的性能。

所以在盒子端,实现一个 Web 动画,优先级是:

GPU 硬件加速 CSS 动画 > 非硬件加速 CSS 动画 > Javascript 动画

动画性能上报分析

要有优化,就必须得有数据做为支撑。对比优化前后是否有提升。而对于动画而言,衡量一个动画的标准也就是 FPS 值。

所以现在的关键是如何计算出每个动画运行时的帧率,这里我使用的是 requestAnimationFrame 这个函数近似的得到动画运行时的帧率。

原理是,正常而言 requestAnimationFrame 这个方法在一秒内会执行 60 次,也就是不掉帧的情况下。假设动画在时间 A 开始执行,在时间 B 结束,耗时 x ms。而中间 requestAnimationFrame 一共执行了 n 次,则此段动画的帧率大致为:n / (B - A)。

核心代码如下,能近似计算每秒页面帧率,以及我们额外记录一个 allFrameCount,用于记录 rAF 的执行次数,用于计算每次动画的帧率 :

var rAF = function () {

return (

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

function (callback) {

window.setTimeout(callback, 1000 / 60);

}

);

}();

var frame = 0;

var allFrameCount = 0;

var lastTime = Date.now();

var lastFameTime = Date.now();

var loop = function () {

var now = Date.now();

var fs = (now - lastFameTime);

var fps = Math.round(1000 / fs);

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分布式系统和大数据处理

React与Redux开发实例精解

因为我身边掌握React技术栈的同事极少,所以一直只是自己在研究和实践。因此,买这本书想看看其他人都是如何使用这些技术的。从这点上来看,这本书确实起到了这样的作...

1723
来自专栏网络

终于,小编我边哭边写,把web前端从入门到精通的路线写出来了

一、前端开发入门 在入门阶段,你首先要学会最基本的技能:根据UI的设计稿,实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技...

2489
来自专栏服务端技术杂谈

双管齐下:同时设计 iOS 和 Anroid

不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和...

3635
来自专栏知晓程序

可怕!你的黑历史「老照片」,这款小程序都翻出来了 | 亲儿子 #14

不仅明星们会有许多「想重金删除的」老照片。即便是普通人,突然翻出几年前的旧照,有时也恨不得马上都删掉吧。

1182
来自专栏SAP最佳业务实践

SAP S/4HANA最佳业务实践:Order-to-Cash订单到收款-2客户360度视图

Details of the Object Page Customer -360°View客户360度视图 –Header 概览 –Contacts 合同 –S...

29611
来自专栏编程微刊

前端切图:自制简易音乐播放器

3234
来自专栏企鹅号快讯

2017年JS 框架回顾:React 生态系统

英文:Laurie Voss 译文:葡萄城控件 www.cnblogs.com/powertoolsteam/p/state-of-javascript-fr...

20010
来自专栏小狼的世界

Axure制作Tab切换效果

axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。

1443
来自专栏Java学习网

程序员对美工的五大抱怨

  就像猫和狗、该隐和亚伯一样,程序员和美工也是对死对头。程序员和美工就像来自不同星球的两种完全不同的人,他们脑袋所关心的事情也完全不同。 程序员希望网站运行起...

3875
来自专栏编程

互联网时代,如何成为优秀的web前端开发者?

互联网技术发展日新月异,成为成为一名优秀的web前端开发者,需要不断学习,关注行业前沿。 本经验贴分享如何成为优秀web前端开发者的经验,供读者参考。 步骤1 ...

2238

扫码关注云+社区

领取腾讯云代金券