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

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

Introduction

The HTML5 video element is the new way to display videos online.  Before it was standardised, many sites used the Flash plugin to display videos.  Several sites (most notably Youtube) now offer both Flash-based and HTML5-based video options.  HTML5 is supported in several places where Flash isn't (including Apple's iOS devices), and people often claim that HTML5 uses the battery more efficiently than Flash.  However, nobody has ever tried to test this in a lab.  This report plans to answer the following question - is HTML5 video really good for your battery?  Let's find out, with science.

If you like this report, don't forget to write a scientific article and cite it (it's how we academic chaps get compensated, instead of money).  The bibtex file is here.

已有 1 人翻译此段
我来翻译


Test Setup

To accurately measure the battery draw of a device, you need to physically connect a sensitive probe between the device and its battery.  I did this on two devices - a tablet and a laptop.  The tablet was the YuanDao (原道) N90, which has a 1 GHz ARM Cortex A8 processor running Android 2.3.1, and the laptop was the Samsung Series 5 Chromebook, which has a 1.66GHz Intel Atom N570 processor running Chrome OS 19.

power probes


已有 1 人翻译此段
我来翻译
For each device, I disconnected the battery from the rest of the device and routed it through a 0.125Ω resistor connected in parallel to a high-sensitivity AP034 probe.  I then connected over WiFi to a test page which served the same video via Flash and HTML5.  The voltage drop on the probe was sampled 100,000 times per second and stored on a LeCroy deep memory oscilloscope.  I then transferred the traces to Matlab for analysis and pretty pictures.


Alex under test


已有 1 人翻译此段
我来翻译


Understanding the Results

The battery capacity of a mobile device is usually measured in milliampere-hours (mAh).  A 1000mAh battery can supply 1000 milliamperes of current for one hour, 500 milliamperes for two hours, and so on.  The graphs you're going to see below show the average current drawn by the device while it is playing the video, starting at the moment I pressed "play" and ending as soon as the movie ended.  The lower the current draw, the higher the expected battery life.

The Samsung Chromebook's battery is rated at 8100 mAh, while the N90's battery is rated at 3200mAh.

已有 1 人翻译此段
我来翻译


The Results

As shown in the figures below, HTML5 video is much better for the battery than Flash.  Moving from HTML5 to Flash resulted in a 17% rise in current draw (and a corresponding reduction in battery life) on the laptop, and a 12% rise on the tablet.  In both cases the HTML5 video was smoother and had less frame skipping than its Flash counterpart.

Laptop Current Draw

Tablet Current Draw

已有 1 人翻译此段
我来翻译

Conclusions

If you're watching video on a battery-powered device, it's a good idea to use HTML5 whenever you can.  Specifically in the case of YouTube you can enable it here.

Also, engineering is fun.  Go study it.

Acknowledgements

A big thank you to Greg Schechter from Youtube LLC, to Andrew Scherkus from Google Seattle and to Aki Kuusela and Aki Tikkala from Google Finland for contributing the hardware and helping me put together this page.

已有 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
返回顶部
顶部