HTML5 和 Flash 视频的电池性能分析 已翻译 100%

oschina 投递于 2013/05/13 06:34 (共 6 段, 翻译完成于 05-13)
阅读 6167
收藏 21
3
加载中

介绍

HTML5的<video>元素是一种在线播放视频的新方法。在它标准化以前,大量的网站用Flash插件来播放视频。现在已有几个网站(最出名的数Youtube了)同时支持基于Flash和基于HTML5的视频播放。有几个地方(包括苹果的iOS设备)只支持HTML5,但不支持Flash,并且人们常常声称HTML5比Flash对电池的使用效率更高。但是,还没有人曾经在实验室测试过。这份报告打算回答一下问题——HTML5播放视频是不是对你的电池更有益?让我们用科学的方法找出答案吧。

如果你喜欢这份报告,不要忘记写科技论文的时候引用本文(这是我们这些学院派最想得到的,而不只是为了钱)。参考文件如下。

QSG
QSG
翻译于 2013/05/13 15:19
2

测试设置

要准确测量设备的电池图,需要在设备和电池之间物理连接一个敏感的探头。我在两台设备上这样做了,一台平板和一台笔记本。平板是原道 N90,拥有 1 GHz ARM Cortex A8 处理器,运行 Android 2.3.1,而笔记本则是三星 Series 5 Chromebook,处理器为 1.66GHz Intel Atom N570,运行 Chrome OS 19。

power probes

K6F
K6F
翻译于 2013/05/13 09:32
2

每部设备,我断开了电池同其它部分的连接,改为通过一个 0.125Ω电阻并联连接到一个高度敏感的 AP034 探头。然后,我通过wifi连接到通过 Flash 和 HTML5 方式提供 相同视频的测试页面。探针上的电压降每秒取样100,000次,并保存到 LeCroy 深存储示波器。然后我将轨迹导入到 Matlab 进行分析和绘制漂亮的图片

Alex under test

K6F
K6F
翻译于 2013/05/13 09:41
1

看懂结果

移动设备的电池容量常常以毫安时(mAh)来衡量。一块1000毫安时的电池可以在放电电流1000毫安的状态下供电1小时,在500毫安的放电电流下供电2小时,如此类推。下图显示的是设备播放视频的时候的“平均电流”,就是从我一按下“播放”按钮,直到播放的电影结束。所画的电流越低,电池的使用寿命越高。

三星Chromebook的电池标称值是8100mAh,原道N90的电池标称值是3200mAh。

QSG
QSG
翻译于 2013/05/13 15:28
1

结果

如下图所示,相较于 Flash,HTML5 视频对电池更好;在笔记本上,从 HTML5 改为 FLASH 将增加17%的电池消耗(对应电池寿命的减少),而平板上则增加了12%。两种平台上,HTML5 都比 FLASH 画质更流畅,跳帧更少。

Laptop Current Draw

Tablet Current Draw

K6F
K6F
翻译于 2013/05/13 09:47
1

总结

如果你在电池驱动设备上看视频,使用HTML5更好;特别当看 YouTube 时,你可以在这里开启它。

同时,工程学很有趣。值得学习。

致谢

特别感谢来自 Youtube LLC 的 Greg Schechter,和来自谷歌Seattle 的 Andrew Scherkus以及来自谷歌Finland的 Aki Kuusela 和 Aki Tikkala,他们贡献了硬件,并帮助我完成了这一页。

K6F
K6F
翻译于 2013/05/13 09:52
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(27)

c
cgoxopx
canvas用webgl模式试试
我土鳖

引用来自“世明”的评论

引用来自“我土鳖”的评论

引用来自“世明”的评论

引用来自“我土鳖”的评论

引用来自“老大爷,咳咳”的评论

Canvas、Flash、DOM、CSS3性能对比 :http://html5.i8fun.com/html5-compare/
到底谁是骡子谁是马,这里一见分晓

在我的渣鸡上跑了一遍,大部分测试中Flash性能领先Canvas 10%-15%,DOM和CSS3基本没法用,只有Flash的50%……

chrome 下canvas > css3 >> flash > dom;
opera 下 flash > canvas = css3 = dom;
这和浏览器有很大关系,flash确实应该被淘汰

可能是我机器性能太差的缘故,Chrome的canvas<flash。
不管怎么看,css3都不适合用作动画,更适合用作动画效果。
DOM就别提了,满满的都是泪

可能和驱动有关系吧,看下这个http://www.famo.us/
完全的CSS/DOM操作,调用GPU渲染,效率很高

嗯,我现在在用的机器是华硕 EeePC 1000H……
同等面积的DOM操作应该和Canvas差不多。
GSMLG
GSMLG

引用来自“我土鳖”的评论

引用来自“世明”的评论

引用来自“我土鳖”的评论

引用来自“老大爷,咳咳”的评论

Canvas、Flash、DOM、CSS3性能对比 :http://html5.i8fun.com/html5-compare/
到底谁是骡子谁是马,这里一见分晓

在我的渣鸡上跑了一遍,大部分测试中Flash性能领先Canvas 10%-15%,DOM和CSS3基本没法用,只有Flash的50%……

chrome 下canvas > css3 >> flash > dom;
opera 下 flash > canvas = css3 = dom;
这和浏览器有很大关系,flash确实应该被淘汰

可能是我机器性能太差的缘故,Chrome的canvas<flash。
不管怎么看,css3都不适合用作动画,更适合用作动画效果。
DOM就别提了,满满的都是泪

可能和驱动有关系吧,看下这个http://www.famo.us/
完全的CSS/DOM操作,调用GPU渲染,效率很高
我土鳖

引用来自“世明”的评论

引用来自“我土鳖”的评论

引用来自“老大爷,咳咳”的评论

Canvas、Flash、DOM、CSS3性能对比 :http://html5.i8fun.com/html5-compare/
到底谁是骡子谁是马,这里一见分晓

在我的渣鸡上跑了一遍,大部分测试中Flash性能领先Canvas 10%-15%,DOM和CSS3基本没法用,只有Flash的50%……

chrome 下canvas > css3 >> flash > dom;
opera 下 flash > canvas = css3 = dom;
这和浏览器有很大关系,flash确实应该被淘汰

可能是我机器性能太差的缘故,Chrome的canvas<flash。
不管怎么看,css3都不适合用作动画,更适合用作动画效果。
DOM就别提了,满满的都是泪
水树
水树
这个要支持一下,做这个测试真不容易~
GSMLG
GSMLG

引用来自“我土鳖”的评论

引用来自“老大爷,咳咳”的评论

Canvas、Flash、DOM、CSS3性能对比 :http://html5.i8fun.com/html5-compare/
到底谁是骡子谁是马,这里一见分晓

在我的渣鸡上跑了一遍,大部分测试中Flash性能领先Canvas 10%-15%,DOM和CSS3基本没法用,只有Flash的50%……

chrome 下canvas > css3 >> flash > dom;
opera 下 flash > canvas = css3 = dom;
这和浏览器有很大关系,flash确实应该被淘汰
Biblical
Biblical
HTML5怎样适应屏幕啊~?!
RisingV
RisingV

引用来自“移动开发”的评论

就 flash 不再支持移动设备 adobe脑残的举动 flash就比不过html5

有什么脑残的。人家早就表态flash会被淘汰,专注html5的开发。
从来不登录
从来不登录
html5专注黑flash一百年不动摇
mmogm
mmogm
就 flash 不再支持移动设备 adobe脑残的举动 flash就比不过html5
返回顶部
顶部