HTML5性能和可行性调研Word格式文档下载.docx
《HTML5性能和可行性调研Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《HTML5性能和可行性调研Word格式文档下载.docx（21页珍藏版）》请在冰豆网上搜索。
4.4.1播放高清视频CPU占用率对比：
14
4.4.2像素效果动画性能对比：
4.5HTML5、Flash在其它设备上性能对比15
4.5.1位图:
15
4.5.2矢量图:
4.5.3数值运算:
16
4.5.4视频播放:
4.6总结17
第五章调研总结17
背景
随着互联网的发展，HTML（HyperTextMark-upLanguage，超文本标记语言或超文本链接标示语言）标准也在不断变化，HTML标准已经走过第4代了，自从W3C（WorldWideWebConsortium，W3C理事会或万维网联盟）公布HTML5标准草案以来，HTML5越发的受开发者及各大公司的欢迎，因为它能用简单的标签元素，属性能实现之前需要用很多复杂JavaScript代码才能有实现的功能。
开发人员能够通过HTML5的各种技术以一种前所未有的统一、简洁、无插件依赖的方式实现炫目、复杂的Web应用，HTML5的优越性已经得到了开发社区的普遍认可。
在微软即将推出的windows8操作系统中，开始更偏重于HTML5和JavaScript开发应用，Office15将支持HTML5/JavaScript开发。
在手机浏览器应用市场，也开始越来越重视HTML5的支持与应用开发，根据2011年12月8日市场调查机构StrategyAnalytics发布调查报告预测，2011年全球支持HTML5技术的手机为3.36亿部，到2013年将增长至10亿部。
这些都说明HTML5时代即将来临，以及将对我们开发研究产生颠覆性的影响。
不过，HTML5目前还处于草案阶段，无论在浏览器兼容性，还是在动画开发的性能上，都还有待进一步的发展提高，以尽快进入HTML5时代。
本次调研，主要调查HTML5浏览器支持程度、HTML5新特性性能以及和Flash、DrectX性能对比，已达到对目前HTML5应用、支持情况有基本了解的目的，为选择HTML5开发提供依据。
这里所说的HTML5也不仅指HTML5本身，而是泛指HTML5、CSS3、JavaScript以及新的浏览器API所包含的整个web前端技术。
第一章HTML5浏览器兼容性调查
1.1简介
从2006年WHATWG和W3C决定合作制定HTML5标准以来（预计2012年成为候选标准），浏览器厂商都不甘落后，一直在努力实现更多的HTML5技术，不过由于各个厂商的步伐不一，导致HTML5在浏览器中的实现程度参差不齐。
主要对目前市场上主流的五大浏览器进行调研，参考资料来自互联网。
1.2主流浏览器对HTML5和CSS3的兼容性
使用平台：
●Windows
●MAC
浏览截止器版本号：
●IE：
6、7、8、9、10
●FIREFOX：
3.6、4
●SAFARI：
5
●CHROME：
10
●OPERA：
11.1
1.2.1HTML5Web应用程序
从表中可以看出，除了客户端数据库IndexDB和触控（Touch）事件外，其它特性Chrome和Safari都全部支持，IE的支持度还比较低。
1.2.2HTML5图形和内嵌内容
HTML5最具革新的内容，内置画布，视频，音频，SVG，WebGL等对象。
其中Chrome，Firefox，还有IE9，都全部支持
1.2.3HTML5音频编码
Chrome全部支持，Safari除OggVorbis外全部支持，IE9开始支持MP3和AAC。
1.2.4HTML5视频编码
其中Chrome全部支持
1.2.5HTML5表单对象
对表单对象支持最完美的要数Opera，IE对新表单元素的支持度还太低。
1.2.6HTML5表单属性
表单属性的支持和表单对象挂钩，依旧是Opera支持度最好
1.2.7CSS3属性
从表中可以看出，CSSTransforms3D还没有浏览器支持，除此之外的其它属性在Windows平台，Chrome和Safari全部支持，其次支持比较好的是Opera和Firefox，IE也逐步提升。
在Mac平台还是Safari仍然表现优异，其次是Firefox和Opera。
1.2.8CSS3选择器
除了IE9以下的版本，其它浏览器已全部支持CSS3选择器，包括IE9和将在明年发布的IE10。
1.3结论
目前，对CSS3和HTML5支持最好的是Chrome，Firefox、Safari次之，IE9开始逐步支持，Opera11.5版本对HTML5的支持也有了进一步提升。
鉴于目前的浏览器兼容状况，要使用CSS3和HTML5进行规模化开发还为时过早。
不过，随着浏览器支持度的不断提高，2012年HTML5草案最终确定后，HTML5极有可能成为网络平台开发标准。
第二章HTML5新特性性能测试
2.1新元素的评测
HTML5里提供了丰富的表单元素，如mail、number、range、color，新的表单属性autofocus、required，用于导航栏的nav元素，定义页眉页脚的header、footer元素等。
作为静态元素，并没有性能上的太大要求，主要瓶颈依旧在于浏览器的支持程度，不过目前主流浏览器都基本支持新的表单元素及属性。
这些新元素的意义不在于提升性能，而是开发上代码量的大量简化，表现上更加规范化。
表单输入标签更具意义，更容易区分不同输入元素，实现不同处理机制。
比如nav导航标签更容易定制网站导航栏，更易被搜索引擎检索。
header、footer元素可以使网页在打印时页眉页脚信息出现在每一张打印纸上。
这些都是HTML5创新性的进步。
2.2音频、视频性能测试
HTML5新特性之一就是添加了支持音频和视频播放的audio元素和video元素。
目前，由于HTML5还处于起步阶段，视频和视频播放主要问题在于浏览器的支持程度上，在性能表现上，由于减少了将视频视频内嵌到object对象上，和使用Flash插件，音视频播放性能和HTML4.01相比略有提升，流畅程度和网速及资源接入点有关。
在第一章“HTML5音频编码”和“HTML5视频编码”调查中已经列举出五大主流浏览器对各类编码的音频视频支持程度。
如果浏览器支持HTML5的Video特性，那么创建的<
video>
元素会有一个叫canPlayType（）的方法，这个方法可以检测浏览器支持哪种视频格式。
支持<
元素的浏览器会自动判断<
source>
标签type属性指出的音视频格式是否支持，然后自行加载第一个支持的资源。
2.3HTML5绘图性能测试
这是本次测试的重点，HTML5最具特色的功能创新就在于为浏览器增加了一个提供绘图API的画布，让开发人员可以通过JavaScript控制画布绘制图像和动画，而不再依赖与Flash插件。
因此，HTML5的绘图性能尤其受到开发人员的关注。
在下一章中将详细对比HTML5和Flash各方面的性能对比，这一节主要对HTML5绘图性能做常规测试。
测试环境：
CPU：
IntelCore2QuadCPUQ8400
处理器频率：
2.66GHz
内存：
1.96GB
显卡：
Intel集成显卡
操作系统：
MicrosoftWindowsXPSP3
浏览器：
Opera11.60
测试页面：
HTML5性能测试
2.3.1HTML5绘点性能测试
分别作用绘点完成后显示和动态绘点（每次画1000个点）测试，绘点坐标随机，测试结果如下所示（记录10次测试的平均值）：
1万个点
10万个点
100万个点
1000万个点
绘点完成后显示
16ms
169ms
1558ms
15659ms
动态绘制
225ms
1042ms
10502ms
90981ms
HTML5性能测试1
由表可见，绘点数量和所需时间基本是呈线性增长的，因为canvas画布绘点只是对每个像素点进行操作，并没有记录其他信息。
动态绘点平均耗时是绘点完成后显示耗时的7倍。
2.3.2HTML5画线性能测试
分别作用画线完成后显示和动态画线（每次画100条线）测试，画线坐标随机，长度随机，测试结果如下所示（记录10次测试的平均值）：
1000条线
5000条线
10000条线
15000条线
画线完成后显示
75ms
343ms
679ms
1025ms
动态画线
615ms
9289ms
34595ms
76973ms
HTML5性能测试2
由表可见，完成后再显示的画线方式耗时是线性增长的，但以每画100条线显示一次的方式耗时增长却极快。
这是因为完成画线后需要调用context.stroke（）方法来显示路径，但每调用一次就会把已经绘制的所有路径都显示一次，所以导致动态画线的方式耗时增长越来越快。
因此，每次测试开始前记得先刷新浏览器，清除之前保留的路径信息。
2.3.3HTML5画曲线性能测试
分别作用画曲线完成后显示和动态画曲线（每次画100条线）测试，曲线坐标随机，长度随机，测试结果如下所示（记录10次测试的平均值）：
画曲线完成后显示
163ms
992ms
2250ms
3531ms
655ms
10609ms
44505ms
108945ms
HTML5性能测试3
和画直线类似，完成后再显示的曲线绘制方式耗时是线性增长的，但以每画100条曲线显示一次的器方式耗时增长极快。
因为同样的，绘制曲线每调用一次context.stroke（）方法来显示路径就会把已经绘制的所有路径都显示一次，所以导致动态画线的方式耗时增长越来越快。
因此，每次测试开始前记得先刷新浏览，清除之前保留的路径信息。
2.3.4HTML5填充图片性能测试
分别作用填充完成后显示和动态填充（每次填充一张图片）测试，填充坐标随机测试结果如下所示（记录10次测试的平均值）：
5000张图片
10000张图片
20000张图片
50000张图片
填充完成后显示
100ms
210ms
414ms
动态填充（每次100张）
682ms
1139ms
2131ms
5164ms
动态填充（每次1张）
35919ms
75107ms
149615ms
331212ms
HTML5性能测试4
图片填充数量和所需时间基本是呈线性增长的，因为和绘点类似，canvas画布填充图片只是对每个像素点进行操作，并没有记录图片信息。
由表可见，HTML5加载图片的效率本身还是很高的，控制显示的开销远大于加载图片的开销，另外图片需要在网络上完成传输后才能成功加载。
动态填充平均耗时根据每次见在数量的减少而增加。
2.3.5HTML5刷新性能测试
做刷新测试的主要目的在于测试HTML5画板处理性能，测试在不同刷新频率下CPU使用率（CPU使用率趋于稳定后30秒内平均值），并记录前台运行和后台运行实际刷新频率（运行1分钟后趋于稳定的实际频率），测试结果如下：
50Hz
100Hz
150Hz
200Hz
500Hz
1000Hz
前台运行CPU使用率
9%
14%
25%
前台运行实际刷新频率
46Hz
85Hz
123Hz
后台运行CPU使用率
——
5%
7%
9%~~25%
后台运行实际刷新频率
127Hz
161Hz
277Hz
294Hz
HTML5性能测试5
由表可见，刷新频率越高，CPU使用率越高，和预期相符。
受处理器限制，前台运行最高刷新频率实际只能达到123Hz，CPU占用率维持在25%左右。
当浏览器处于后台运行时，实际刷新频率有了很大提升。
浏览器处于后台运行时，CPU使用率也有了很大降低，当实际刷新频率达到277Hz以后，CPU使用率一开始会维持在25%左右，经过一段时间后稳定到9%左右。
可见刷新画板还是比较占用系统资源的。
2.3.6HTML5清空画板性能测试
和刷新画板相同，HTML5清空画板操作也是一件比较消耗系统资源的工作，，测试在不同清空频率下CPU使用率（CPU使用率趋于稳定后30秒内平均值），并记录前台运行和后台运行实际清空频率（运行1分钟后趋于稳定的实际频率），测试结果如下：
16%
24%
84Hz
114Hz
115Hz
116Hz
7%~~11%
124Hz
218Hz
245Hz
HTML5性能测试6
清空画板使用context.clearRect（）方法。
和刷新测试类似，当浏览器处于前台运行时，最高清空频率实际只能达到116Hz，CPU占用率维持在25%左右。
当浏览器处于后台运行时，和刷新测试有所区别，当刷新频率在150Hz以内时，CPU占用率很不稳定，从0~~25%，最高清空频率可以达到245Hz。
2.4HTML5性能测试总结
影响HTML5绘图性能的因素有：
Ø
CPU性能
显卡性能
浏览器性能
JavaScript代码优化程度
其他
由于canvas只是为浏览器提供了一个绘图接口，实际绘制由JavaScript控制，所以绘图性能和JavaScript的性能息息相关。
进过2.3节的测试，HTML5的总体绘图性能略微偏低，总体还算令人满意，达到了用做动画设计的基本要求
第三章HTML5的发展
如果实现同样的效果，Flash比HTML5无论在性能，资源消耗和开发容易程度上都占优势，那不会因为HTML5是新技术就将取代Flash，尤其是在以性能和用户体验为重的浏览器上。
HTML5能被开发者所接受，那么必然要有它的优势。
HTML5已经添加不少新的元素，目前任处于草案阶段，添加WebSocket、WebSQL、WebGL……甚至WebQt、WebMFC都是无尽畅想。
HTML5可以直接为浏览器不断添加新的功能，而用户只需要安装浏览器就能得到完整的体验。
或者不远的将来浏览器就是一个操作系统，完成Java的桌面遗愿，实现Google的畅想。
其实现对于拥有硬件加速技术的Flash10.1，HTML5的性能还是不足的。
未来HTML5要取代Flash必须有一个高效的2D/3D图形文字渲染引擎，和一个高效的JavaScript引擎。
目前浏览器正在努力望着方面发展。
这是一项长期性的工作，也是各大浏览器厂商正在努力完成的任务。
各大浏览器开发商之间做好协商沟通，早日为HTML5制定出标准，推出新一代的浏览器，才将使HTML5大规模应用成为可能。
HTML5的互动会将JavaScript提高到一个新的高度，这必将需要一个成熟的开发环境。
无论DreamWeaver、VisualStudio都才只能做简单的智能提示，远远达不到开发的需要。
只有成熟的开发环境才能聚拢更多人才，开发更丰富的应用。
Flash新版本的部署只需在90%多桌面占有率的基础上更新插件就能完成，将来HTML5的部署在如今顽强的IE6装机量上如何实现，这也将是迫切需要解决的问题。
一项来自IT168数据中心的调查显示，目前有71.85%的开发者表示目前处在HTML5技术的学习过程中，有18.87%的开发者目前还没有特别关注HTML5技术，只有9.27%的开发者表示已经有HTML5应用上线。
绝大多数开发者已经看好HTML5技术未来的发展前景，节省计算资源、节省存储资源、良好的的可移植性，这些都是HTML5所具备的吸引力。
HTML5不是用户应用的迫切需求，更多是厂商试图改变软件生态格局的战略需求。
HTML5的兼容性鉴于各大浏览器的以往表现，还不足以满足立即迁移应用。
HTML5需要一个成熟完整的开发测试环境，目前的IDE还远远不能满足需求。
HTML5功能的增长要求浏览器必须有一个高效的图形引擎和脚本引擎。
要完成HTML5终端的部署工作也是一项长期而艰巨的任务。
第四章HTML5、Flash对比
4.1简介
HTML5引入了控制音频播放的audio元素，控制视频播放的video元素，以及用于图形绘制的canvas元素，让浏览器不再需要Flash插件的支持就能直接播放音频视频，以及实现丰富的动画游戏设计。
这些元素为浏览器添加了丰富多彩的应用，提供更加便捷高效的多媒体服务，而在这之前这些功能很多都是由Flash插件实现的，所以，HTML5的多媒体性能对比Flash的性能到底如何，成为开发者关心的问题。
4.2Flash的优势
✧广泛的开发群体，在开发人员上，十多年的积累，有众多优秀的艺术家、程序员和互动设计师集中在Flash平台上做互动媒体开发。
✧FlashPlayer是一个封闭的系统，是由Adoeb独家控制，改进升级只需要用户升级FlashPlayer插件，HTML5是一个公开标准，改进升级不容易，改进也意味着升级浏览器。
✧AdobeAIR让Flash超越了web，脱离了浏览器，越来越多的功能在Flash平台上实现。
4.3Flash的劣势
✧FlashPlayer版权私有。
✧swf文件的内容相对封闭，搜索引擎不友好。
✧插件有安全隐患。
✧相对于Ajax技术的学习曲线及学习成本高。
✧FlashPlayer94%装机率!
=100%。
4.4HTML5、Flash桌面应用性能对比
Windows
Mac
Flash10.0
Flash10.1
HTML5
Safari
23%
37%
32%
12%
Chrome
26%
19%
34%
53%
50%
51%
Firfox
22%
8%
29%
42%
38%
IE8
15%
播放高清视频CPU占用率
由表可见HTML5播放高清视频的性能在Mac上好于Flash，但在Windows上的表现不如Flash，Flash表现取决于它能否使用硬件加速。
这项功能是在Flash10.1中推出的，允许插件通过图形处理单元（GPU）对视频进行解码。
Adobe称，Linux和MacOSX目前都不支持硬件加速，后者是因为Mac禁止某些所需API访问。
与Flash相比，HTML5的位图API还太少。
只能通过getImageData和putImageData来操作imageData对象。
getImageData和putImageData可以获得/绘制一个imageData到context2d上。
mageData是一个类似Flash的BitmapData的对象，包含一个矩形范围内的像素信息。
现在我只是想取得一个像素的信息，也必须建立一个1×
1大小的imageData来获得位图信息，这显然是很浪费的。
而Flash里通过getPixel和setPixel则可以很方便进行像素操作。
另外，HTML5Canvas绘图性能还有待提高，本例中绘制100×
100个imageData还满流畅。
但150×
150就开始明显变慢。
如果用fillRect则更慢。
可以说在矢量绘图和位图绘图功能上，目前Flash远超HTML5。
4.5HTML5、Flash在其它设备上性能对比
一项来自CRAFTYMIND得评测向人们证明：
HTML5在性能上仍远远落后于Flashplayer。
测试使用了DroidX,NexusOne,DesireHD,Atrix,PlayBook,GalaxyTab,Xoom等设备，分别测试了位图，矢量图，数值运算，视频播放等项目。
位图显示测试每秒帧数：
HTML5Cache
Flash
Phones
DroidX
14.98
15.93
31.70
NexusOne
16.57
17.86
36.89
DesireHD
19.6
23.08
43.66
Atrix
26.47
30.19
32.34
iPhone4
14.57
17.24
Tablets
PlayBook
10.7
10.68
25.78
GalaxyTab
19.17
19.98
35.99
Xoom
24.07
19.66
26.62
iPad2
19.88
28.01
NumbersInFramesPerSecond
位图帧数
所有设备上Flash的位图性能都优于HTML5，平均而言Flash的速度是HTML5的2倍
矢量图显示测试每秒帧数
8.47
26.59
7.59
26.07
8.96
28.12
升级会员 