HTML5的性能不输原生app，还支持模块化？

你可能已经发现，一个好玩有趣的HTML5页面，会比普通的独立应用更能获得微信朋友圈用户的关注。随着移动应用越来越多，推广难度越来越高，你的产品是否也应该有HTML5页面？

如果答案是肯定的，那么也许你可以试试拍案叫绝UI，一个开源的HTML5前端框架。有了它的Web组件、JS插件和级联样式表(CSS)，您可以快速构建一个HTML5产品。

对于那些经常在移动设备上访问网页的用户来说，您可能已经注意到，一个网页基本上可以分为几个块，如菜单、标题栏、图片库、内容列表和分割线。在惊奇UI中，政府提供了各种Web组件，你甚至可以像构建块一样构建HTML5产品。

除了上面提到的主要web组件，如折叠面板、页眉、页脚、轮播、选项卡、简介和段落等都是开发人员可以在拍案惊奇UI中直接使用的Web组件。因为拍案叫绝UI是开源产品，一些第三方开发者不断为其贡献特殊组件。比如说到地理位置，用户可能需要一个地图指南，然后就可以整合百度地图的组件。你可能需要对文章下面的系统进行评论，然后可以使用“多说”组件；有些面向服务的网页可能需要客服，那么“美嘉客服”组件自然会派上用场。

当然，一些开发人员可能会说这些元素只是网站的一部分。当您真正构建一个网站时，您可能需要各种交互效果和文本调度样式。这时候，惊奇UI的JS组件和CSS组件的用处就显现出来了。

通过JS组件，开发者可以获得警告框、平滑滚动、加载进度条、弹出框、模态窗口、下拉组件、按钮交互等一系列UI增强效果。通过CSS组件，开发人员不仅可以直接集成按钮、表单、表格等HTML元素，还可以使用小徽章、面包屑导航、按钮组等页面组件。

目前Amazie UI有近20个CSS组件、10个JS组件和17个Web组件，主题近60个。据CEO陈本峰介绍，Amazie UI会比一些国外的Web前端框架更考虑中国用户的需求。比如字体排版，Bootstrap的前端框架没有定义中文字体，所以你的网页在不同的系统和浏览器下显示效果可能会有所不同。但由于中文字体是在拍案UI中定义的，针对国内市场占有率较高的浏览器进行了优化，这种情况是可以避免的。

对于那些试图做HTML5产品的公司，你可能还停留在脸书、LinkedIn等大公司从HTML5 app“倒戈”到原生app的阴影下，因为即使在今天，也有人在谈论HTML5的时候会给出上面的例子。然而，曾在Chrome团队工作的工程师Shinji Ikari告诉PingWest，脸书最初做HTML5应用如此缓慢的原因更多是因为脸书本身，而不是因为HTML5不起作用。因为从技术上讲，HTML5的缺陷不是慢，而是无法规模化。当时脸书的HTML应用还在使用XML，可以说他们的技术相当落后。

为了证明HTML5 app的性能不输于原生应用，谷歌的两位工程师专门制作了一款Fastbook的HTML5 app，以表明脸书的“变节”并非HTML5fault。根据Shinji Ikari的说法，HTML5应用的性能完全可以赶上两年前的原生应用，更不用说现在了！

那么你可能会好奇，既然HTML5的性能不输于原生应用，为什么我们平时看开发者_开发问答到的高质量HTML5应用就那么少呢？对于这一点，陈本峰认为这更多的是由于该领域的开发者缺乏技术积累。

Jiikari还表示，对于很多应用来说，编写原生app几乎是不可避免的。如果你正在写一个没有任何DOM(文档对象模型)的3D游戏，那么根本没有理由使用HTML。使用JavaScript不仅会简化你的工作，还会让你的项目进度变得更差。然而，像脸书这样的手机应用程序就是一个列表，没有什么超出HTML5的范围。使用HTML5应该得心应手，所以很多时候大公司对于技术的选择并没有太大的参考价值。

好吧，在解释了HTML5并没有人们想象的那么弱之后，你可能会认为Amazie UI中的这些组件不足以做出你想要的产品，这也是Amazie UI选择开源的原因之一——让社区为其贡献更多的内容。如果你现在打算做HTML5产品，即使不选择拍案叫绝UI框架，也不要让脸书、LinkedIn这样的案例妨碍你。