HTML5之荣耀与苦涩

HTML5在移动互联上的胜利

刘宗凡：近两年来，炒得最火热的互联网词汇之一就是HTML5。在上期我们回顾了HTML5的历史和现状，现在请几位嘉宾来聊一聊自己的看法。

谭剑仪：乔布斯在宣布苹果不支持Flash而转为支持HTML5后，iPad、iPhone等移动设备风靡一时，安卓设备后来居上，移动互联风光无限。目前移动互联网已经超出传统PC互联网的规模，并且还以惊人的速度发展。要在互联网上取胜，就必须要占领移动互联的桥头堡。安卓系统从4.0开始也不再支持Flash，HTML5在移动互联网上取得大胜。现在HTML5如日中天，身上披着荣耀的光环，仿佛一夜之间，它便会统治互联网一般。

邱元阳：移动设备已经充斥于社会生活的各个方面，手机、MP3、PDA、平板电脑，即使是手持移动设备，也无不在与网络接轨。在一个多设备时代，人们需要使用各种设备满足日常需求，但到目前为止，HTML5/JavaScript是唯一能够在所有现代设备上运行的语言。

利用HTML5，某个广告创意可以在任何设备上实现，如触摸屏、陀螺仪、GPS甚至3D图形加速设备。由于HTML5的规范尚未确定，也就意味着它仍可灵活应用于硬件创新之中，也就是说，HTML5有可能会掀起一场数字广告革命。

HTML5也是目前唯一可以在所有主要移动操作系统以及浏览器上运行的语言，使广告创意可以使用更多的基本构造，转化为无数种内容形式。

在HTML5之前，移动广告一般是通过SDK方式来进行开发设计，形成自定义的本机代码，因而没有可扩展性，创作灵活性也受制于开发工具。目前互联网上的移动广告多为静态图像格式，而HTML5将可能改变这种局面。Google也正在与行业伙伴合作，谋求建立HTML5的广告标准。

刘宗凡：邱老师特别提到HTML5在数字广告革命上的巨大作用。当然HTML5的意义不仅在此。现在联上互联网的不仅仅是PC，形形的移动设备风头更劲。不同分辨率的屏幕，不同的浏览器，各种设备千差万别。要给大多数移动设备以较好的体验效果，无疑我们不能给每一个设备开发一种应用。移动设备的多样性使得HTML5获得了巨大的生命力。

邱元阳：对。HTML5改变了开发人员创建移动Web应用的方式，然而这并不是移动开发的终极目的。但用HTML5开发移动应用并不像很多开发人员想得那么容易。如果没有JavaScript和CSS，HTML5就什么也不是了。《对一个HTML5移动应用的解剖》的作者布赖恩·富宁（Brian Fling）也指出，很多开发人员没有像Prototype、MooTools、jQuery或Scriptaculous这样的框架的帮助就写不了JavaScript。

HTML5能够让互联网浏览器以生动的图像和效果来对用户的操作进行回应，而且用户无需安装额外的软件就可以拥有游戏般的互动体验。应用程序员可以借助HTML5开发出兼容智能手机、平板电脑和PC等多种设备的软件，而无需为特定的硬件或在线程序商店量身定做软件产品。

HTML5与Flash的情仇

刘宗凡：我们谈HTML5，就绕不开Flash这一冤家。虽然在移动互联领域HTML5已经一统天下，但在PC端，Flash却体现了顽强的生命力。这和Flash的优秀特征分不开。Adobe公司不断丰富、提升Flash的表现能力，所以Flash能做到与时俱进，在传统互联网领域力压HTML5一头。

谭剑仪：Flash是基于插件形式的，目前Flash的插件几乎遍布各大浏览器，就是不支持Flash的Apple在PC端也还是支持的。而HTML5只是一个新的标准，目前还没有过多的浏览器提供支持，而且支持的完整度也相对不同，这会让开发者花更多的时间考虑浏览器的兼容性问题。

Flash已经发展得相对成熟，2D和3D都提供了支持，而且对AS的脚本运行效率进行了大幅度的提升。Flash的运行性能是HTML5的数倍，Flash游戏在表现方面也是HTML5望尘莫及的。HTML5毕竟是新生儿，对于图像处理仅提供了Canvas标签，需要进行大量的图像引擎工作。但HTML5由浏览器解析执行，无需特别插件。只是各大浏览器支持程度不同，普及还需要很长一段时间。Flash营造的是一个封闭的内容，搜索引擎根本索引不到Flash里面的内容，违背了内容开放的潮流。

在公司支持、开发学习成本、功能应用、运行性能、软硬件平台支持等方面，二者各有优缺点，在目前没有谁胜谁负，在将来也不一定是谁替代谁的关系。

邱元阳：虽然HTML5和Flash是天生对头，但它们之间也不是毫无关系。我们可以使用工具将Flash转换成HTML5格式。Google的Swiffy以网站方式，让使用者上传Flash的.swf档案，支持Flash所使用的swf 8格式与ActionScript 2.0指令集。其输出格式为HTML5，主要针对Chrome、Safari等Webkit所开发的浏览器，新增加的Flash Professional扩充模组支持Flash CS4及之后的版本。

Adobe提供的Flash转换HTML5工具Wallaby，可以将Flash原始档案格式.fla转换为HTML5格式。Adobe还推出过一个针对HTML5开发的编辑工具Edge。

由于使用Flash的网站众多，而且Adobe及Google所提供的转换工具主要目的在于转换简单的Flash程序，因此有其他厂商如Dyad Communications等，提供工具程序让大量使用Flash技术的网站在转换为HTML5时可以节省部分人力。

HTML5的“三驾马车”

刘宗凡：我们所说的HTML5，实际上是一个广义的范围，它还包含了CSS3和JavaScript。没有CSS3和JavaScript，HTML5将成为无本之源。正是这“三驾马车”的齐头并进，让WEB的发展大放异彩。

谭剑仪：JavaScript是一种广泛用于客户端网页开发的脚本语言，最常是于HTML上使用，用来给HTML网页添加动态功能。然而JavaScript也被用于不同的接口上，如服务器。它最初由网景公司的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类型。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript、文档对象模型、浏览器对象模型。

不同于服务器端脚本语言，如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以早期的程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。随着服务器的强壮，虽然现在的程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

邱元阳：HTML5为Video和Audio提供了API支持，让程序员可以控制用户界面，如实现播放或暂停。HTML5中的新元素Canvas，可以被脚本语言用来绘制图形，实现画图、图像合成、简单动画等。利用Canvas的API，就可以通过fillStyle设置填充色，通过strokeStyle设置描边色，甚至可以用来画路径。Canvas的特点和强大功能还使它可以用来编写网页游戏。

网页上的拖放操作一直是个难点，虽然在Flash中可以轻易实现。如果在HTML5中，依靠JavaScript，这种直接操作已经不在话下。在winform中，鼠标Drag（拖动）和Drop（释放）是要经常用到的，现在在webform中也能实现：在Drag&Drop里定义了DataEvent和DataTransfer接口，同时当拖拽操作发生时会触发如 dragstart、dragenter、dragleave、drop、dragend等事件。

Web Workers能让JavaScript多线程，在后台运行多个任务而不会中断当前的浏览器操作。而Application Cache则是HTML5对于离线浏览的全新支持，通过在html元素上加一个属性manifest，浏览器会提示用户是否要将数据缓存到客户端。这种缓存机制和离线应用的优势也得到了Google认可。如果再使用了Storage和Webkit，还能实现database storage，可以像后台操作数据库一样查询数据并执行操作，相对于Cookie的存储来说，存储的容量要大很多。

此外，HTML5还可以实现跨域文档通信，不管源域来自哪里都能正常呈现，并防止脚本攻击。

谭剑仪：CSS就是层叠样式表（Cascading Style Sheets），又称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。目前最新版本是CSS2.1，为W3C的候选推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发过程中。

一个网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构（用HTML或其他相关的语言写的）与文件的显示（CSS）分隔开来。这个分隔有许多好处：①文件的可读性被加强。②文件的结构更加灵活。③作者和读者可以自己决定文件的显示。④文件的结构简化了。

CSS还可以使用其他的显示方式，如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置。此外，CSS还可以与XHTML、XML或其他结构文件一起使用，唯一条件是显示这种文件的浏览器装备了接受CSS的功能。

邱元阳：HTML5对CSS3的依赖性自然不必多言。对于Web开发者来说，CSS3不只是新技术，也是新概念；不只是提高了开发效率，也带来了更多的可能性。有了CSS3，HTML5不必再依赖于图片或JavaScript去完成圆角、多背景、自定义字体、3D动画、渐变、阴影、透明度等提高Web设计质量的网页特效。

CSS3在选择器上的丰富支持让我们可以灵活地控制样式，而不必为了选择某些元素给他们加上各种各样的类名；CSS3在样式上的丰富支持可以让前端开发人员省去很多时间和精力；CSS3对于动画类型的支持则使得无插件、无滤镜的网页动画成为可能，transform（变换）、transition（过渡）和animation（动画）几种动画类型的灵活运用，可以实现非常绚丽的动态效果。

需要说明的是，目前大部分浏览器只支持部分CSS3属性。对于不支持CSS3的浏览器可以使用JavaScript来实现。

HTML5的苦涩现实

刘宗凡：对于HTML5的发展，2012本来是充满想象的一年。但今年即将过去，HTML5并没有像我们预计的那样达到一个高峰。

谭剑仪：跨平台HTML5开发并未起飞。桌面端和移动端HTML5之间的分裂还是巨大的，这两者之间没有形成一个统一的开发标准，主要原因就在于以下三点差异：①电脑键盘与手机、平板键盘之间的差异。②两个平台设备的屏幕大小。③鼠标与触摸屏操作的差异。

邱元阳：HTML5的一大优势是可以运行在几乎所有的平台，即“一次编写，到处运行”。最理想的情况就是针对特定平台进行产品开发，这样开发者就能对应用的外观、感觉和功能等进行相应的个性化设置，从用户体验角度来说这也是极其重要的。然而很多人对HTML5的预期就是HTML5应用可以实现跨平台访问，比如说从桌面端访问移动HTML5应用。不过从现实情况来看，用户也只能选择一个应用能更好运行的平台，因为当前的跨平台HTML5并不完善。

在HTML5发展的过程中，那些已经建立了一个网站的开发者们就曾经历过很让人头疼的浏览器兼容性和跨平台适配问题。举个例子来说，Gamzee的一位工程师Sean Soria就曾描述过他们在为Facebook的HTML5博客开发Skyscraper City应用的时候所面临的问题：在编写代码的时候他在文档对象模型（DOM）中使用了一个伪3D转换CSS代码，它能触发大多数移动设备的硬件加速能力，而且这种方法比使用Canvas元素表现要好很多，是非常不错的一种方法，但问题就是Android手机并不支持。这样的问题还有很多，往往不同设备之间HTML5应用所面临的问题和解决方法都不一定是相同的。

基于网页的WebApp短期内将遇到发展瓶颈。因为标准化问题和终端设备功能的支持程度，很难在短时间内找到确切的解决方案。

刘宗凡：在越来越多的浏览器和网站开始迎合的背景下，凭借免费+开源、跨平台、多种特性带来的快速开发等因素，HTML5一定会成为互联网领域最具影响力的革新力量。但是，目前的行业格局是，HTML5由技术发烧友、概念炒作者所主导，技术领域的讨论过度泛滥，而在应用层面，实际应用于商业化领域的讨论却十分匮乏，鲜见成功的案例。这是HTML5的现实。

邱元阳：近期，Facebook公司CEO扎克伯格在TC Disrupt大会上公开表示，Facebook的应用完全依赖HTML5是最大的错误，导致浪费了两年宝贵的时间，将来要改为原生应用押注。

Facebook为什么放弃HTML5而转战原生应用？主要原因有四点：①工具/开发者API。没有相应的工具对内存进行跟踪。②网页滚屏效果。用户在浏览网页的时候，需要的是非常流畅的滚动效果，而基于HTML5的Facebook应用并没有做到这一点。Facebook这次的改进针对网页滚动进行了提升。③GPU。图片处理并不是HTML5擅长的地方。了解HTML5的人会发现，图片加载和处理当然是“不应该在现阶段使用HTML5实现的”。④其他。HTML5目前擅长的部分是数据量不大、动画少的页面，虽然这恰恰也是Facebook注重的地方。但相比之下，原生应用能够提供更好的触摸跟踪支持、更平滑的动画、更好的缓存。

谭剑仪：当然，Facebook的开发人员也进行了强调：“虽然我们的策略做了调整，只是用户更在乎速度上的体验，迫使Facebook转向本地编码。但HTML5以及基于HTML5的Web版Facebook不会就此消失——事实上，为了给用户带去更棒的体验，HTML5在未来扮演着非常重要的角色。因为很多HTML5可以实现的功能对于本地编码来说有一定的挑战。”

产品经理Mick Johnson坦言：“用户通过多达7000种移动设备访问Facebook，我们总不能为7000种设备去构建原生应用吧。移动Web依然是非常具有价值的平台，而且我们面临的并不是在HTML5和原生应用之间二选一的问题，有些时候两者是并行的，未来我们更多的会采用本地编码+HTML5的混合模式。目前HTML5的技术还不是很成熟，但我们应该以长远的眼光看待它。”

刘宗凡：这就是HTML5的现状：一方面，它披着荣耀的光环，受到众多追捧；另一方面，各大公司小心翼翼，无法完全投入HTML5的怀抱。

邱元阳：抛开技术从另一个角度来看，HTML5之所以步履蹒跚，其实是商业巨头角逐的结果。例如，作为HTML5的坚定支持者乔布斯，在推动HTML5时并没有想象中那么积极。苹果的官方数据显示，App Store的应用下载次数突破250亿次，与2011年1月的100亿次相比，增长了超过150%。据AdMob的估算，AppStore每年营收可达24亿美元之巨。本地App仍维持如此强势之时，苹果怎会乐意看到HTML5兴起？有研究机构认为，HTML5兴起，将令苹果的经营利润增长在2015年或遭受30%的损失。同时，苹果生态系统的封闭性也将被打破。苹果迟迟没有投入Web App、建立类似Google或者Opera那样的生态渠道，甚至从iOS4.0开始，封杀了一系列对于HTML5来说至关重要的Web API，如Audio。这样做的原因就在于，在自家App Store如日中天的时候，苹果为什么要冒着失去30%利润的风险，扶植一个替代性质的生态系统？类似的“花招”还有很多——在HTML5中的视频格式一项，为牵制Google等公司主导的WebM格式，苹果选择了支持MPEG，一个核心为商业机构所拥有的格式，这显然与HTML5开源共享的理念背道而驰。

一边力推，一边封杀，这就是苹果对HTML5的真正态度。事实上，不止苹果一家公司有这样的想法和做法，这实际是HTML5这个游戏圈中，几乎所有玩家的一种心态：既希望这种开放高效的载体能够早点标准化，为己所用，同时又能保证自身的利益体系不受“恶性”冲击。

刘宗凡：跨平台运行的兼容性、不同浏览器造成的碎片化、各商业巨头的博弈，使得HTML5光环的背后充满了苦涩。但时至今日，不管HTML5的发展会有多曲折，都不会有人再轻视HTML5带来的变革。最近横空出世的火狐操作系统（Firefox OS），就试图让HTML5应用可以直接内置在手机底层架构上，以便更流畅运行。Firefox OS是一个完全基于HTML5的系统，没有所谓的“原生应用”。无论是打电话、发短信、玩游戏，使用的都是HTML5技术。在移动领域原生应用大行其道的今天，Mozilla的策略可谓激进。这一点与Chrome OS可谓异曲同工。事实上，浏览器与操作系统间的界限正在模糊。

HTML5给Web带来的不是改良，而是一场革命。虽然HTML5正式标准还要到2022年才能，可以想象的是标准的制定过程将非常曲折，但这无疑非常值得期待。