Flash已死,HTML5当立

swordray 2010-02-26

GoogleMozillaApple 等组织的努力下,HTML5 标准已经从草案走向实现。目前几个主流浏览器的最新版本均已或多或少支持HTML5的新功能,即使是过时的浏览器也可以通过Javascript和插件来模拟相应的效果。

 

在开发RIA(富互联网应用)的时候,是选择占有率、兼容性、开发效率有限的Flash、SilverLight、Gears、JavaFX等插件,还是选择与Javascpt、HTML、CSS等无缝结合的新Web标准,是值得考虑的。当然也有人会担心IE的顽固。对比十年前,Google也是在AJAX技术不成熟的情况下开发出GMail和Google Maps等新型应用,赢得了用户的认可,说明机会和风险是并存的。在又一次新技术浪潮来临的时候,你能占据先机吗?

 

 

绘制图像

 

HTML5将通过两项图像技术来提供更华丽的界面:SVG 描述矢量图,<canvas> 标签和Javascrpt绘制位图。会翻墙的话可以看看Google工程师的视频介绍

 

兼容性方面,主流浏览器中只有IE不支持,Google的svgweb 可以通过VML在IE上模拟SVG,而同样是Google的excanvas 可模拟canvas。

 

虽然2D世界还在发展中, OpenGL的WebGL 和Opera的3D Canvas 已经把手伸向3D,不用太久魔兽世界这样的大型3D游戏也会出现在浏览器上。

 

视频音频

 

使用<video>和<audio>标签即可直接播放视频和音频,并通过Javascript接口控制。目前有争议的是解码格式,至少要支持OGG和H.264两种文件,再加上传统的FLV,视频网站又要多准备很多块硬盘了。不过对于已经支持HTML5的YouTube 来说应该不是问题。

 

兼容性方面,html5-now Javascript库会根据浏览器的不同 提供Flash、QuickTime、Java三种播放器作为补丁。

 

地理位置

 

经过用户许可后可获得当前用户的地理坐标,以提供更加本地化的服务。根据使用Android的经验,硬件会尝试电信、WIFI、GPS等尽可能多的手段去定位。

 

访问Google Maps的Where Am I ? 就可以知道你的浏览器是否支持,目前好像只有FireFox。Google Gears则是另一种选择。

 

本地存储

 

HTML5提供两种存储方式:key-value方式的Local Storage和数据库方式的Web SQL Database。

 

对于IE8以前的版本,local-storage-js 可以在没有Local Storage情况下用cookie去替代。另一个javascript库PersistJS 则可从Gears、Local Storage、Web SQL Database、Global Storage、Flash、IE、cookie等多个存储方法逐一尝试,以便最大限度的兼容。

 

离线应用

 

有了本地存储之后,通过html元素的manifest 属性中指定哪些程序和资源文件需要缓存下来,结合离线 API 就可以在没有网络的时候继续运行程序,待网络恢复后再与服务器同步。目前只对非IE的浏览器有效,IE下需要使用Google Gears。

 

后台计算

 

对于计算量较大的程序,由于Javascript单线程执行,容易让浏览器陷入假死状态,Web Worker 技术正是为了解决这个问题。每个worker会使用各自的线程在后台运行,与DOM环境完全独立,并通过本地存储交换数据。

 

目前只支持非IE浏览器。如果不能放弃IE的话还是推荐利用Flash计算,性能比Javascript好很多,类库也比较丰富。

 

网络通信

 

Web Sockets 可以提供一个socket持久通信连接,以替代问题多多的Comet或是Ajax轮询的方案。同样只支持非IE浏览器,在IE上web-socket-js 利用Flash来实现。

 

DOM5

 

标签增加了更多类型,如<article>、<nav>、<footer>等语义标签,时间、颜色、范围、组合框等<input> 类型 ;响应拖拽onhashchange 、onerror等事件。这些特性html5-now 通过Javascript进行了模拟。

 

 

 

应用示例

 

画图软件:http://mugtug.com/sketchpad/


 

 

本地化便签:http://htmlfive.appspot.com/static/stickies.html


 

 

反恐精英:http://www.benjoffe.com/code/demos/canvascape/


 

 

LOCOROCO:http://www.blobsallad.se/


 

 

飘动的3D旗帜:http://gyu.que.jp/jscloth/


 

 

 

连连看游戏:http://icefox.net/anigma/


 

 

打鼓机器:http://www.randomthink.net/labs/html5drums/


 

 

某动作游戏:http://www.chromeexperiments.com/detail/another-world-js/


 

 

分形图:http://onecm.com/projects/canopy/


 

 

打砖块:http://billmill.org/static/canvastutorial/


 

 

可以旋转的播放器:http://htmlfive.appspot.com/static/video.html


 

 

图表:http://www.rgraph.net/


 

 


 

 

 

 

此文章带有附件,请前往http://www.iteye.com/topic/603639下载

whitenegro 2010-02-26
标题很雷, 不过有一部分我是同意的,就是flash在前端技术中可能要退出非动画的部分了。  而且flash毕竟不是浏览器的一部分。


llfzy 2010-02-26
HTML5  有哪些好处哦。。很好吗?
xinyu198736 2010-02-26
lz,你弄清楚了再说话,你知道html5做动画多么复杂吗?你自己去试试就知道了,在动画部分,html5要超越flash那至少要10年,况且html5的canvas是设计用来呈现图像的,而不是设计动画,只是提供了几个绘图api而已
xzhome 2010-02-26
xinyu198736 写道
lz,你弄清楚了再说话,你知道html5做动画多么复杂吗?你自己去试试就知道了,在动画部分,html5要超越flash那至少要10年,况且html5的canvas是设计用来呈现图像的,而不是设计动画,只是提供了几个绘图api而已

除了游戏,web上不需要动画
JackAndroid 2010-02-26
xzhome 写道
xinyu198736 写道
lz,你弄清楚了再说话,你知道html5做动画多么复杂吗?你自己去试试就知道了,在动画部分,html5要超越flash那至少要10年,况且html5的canvas是设计用来呈现图像的,而不是设计动画,只是提供了几个绘图api而已

除了游戏,web上不需要动画

  那倒是,有时候真要想想为什么要那么多动画。
black.angel 2010-02-26
作为一个前端开发工程师.看到这个题目确实很吸引人.不过我严重不同意LZ的说法,Flash至少在未来的5-10年之内不会消亡,况且HTML5也只是刚刚推出,各方面的性能都没有一个权威的比较.何来取代只说?
天梯梦 2010-02-26
这纯粹是扯犊子,除非你把占世界70%的ie消灭掉,否则这个标题就太狂了。
chandler 2010-02-26
要知道当年,说苍天已死,黄天当立的黄巾军。最后被汉朝给灭了。
xuby 2010-02-27
虽然2D世界还在发展中, OpenGL的WebGL 和Opera的3D Canvas 已经把手伸向3D,不用太久魔兽世界这样的大型3D游戏也会出现在浏览器上。
==============================================================================
基本上不可能,js效率太低。
大型游戏客户端只有一种语言可选,那就是C++。
Global site tag (gtag.js) - Google Analytics