html5的性能不输原生app 可以用拼积木的方式做HTML5产品

　可能你已经发现了，一个好玩有趣的 HTML5 页面在微信朋友圈里获得的用户关注度会远超过那些普通的独立应用。在移动应用越来越多，推广越来越难做的情况下，你的产品是不是也应该有一个 HTML5 页面？

       

　　如果答案是肯定的，那么或许可以试试 Amaze UI 这套开源的 HTML5 前端框架，利用它提供的 Web 组件、JS 插件和层叠样式表（CSS），你可以快速的搭建出一款 HTML5 产品。

　　对于那些经常在移动设备上访问 Web 页面的用户来说，你可能已经注意到了，一个 Web 页面基本可以分为菜单、标题栏、图片画廊、内容列表、分割线这几大块。在 Amaze UI 里面，官方提供了各种各样的 Web 组件，你甚至可以像拼积木那样来搭建 HTML5 产品。

　　除了上面提到的那几个主要网页组件之外，像折叠面板、页头、页脚、图片轮播、选项卡、简介、段落这些都是 Amaze UI 中开发者可以直接使用的 Web 组件。由于 Amaze UI 是一款开源产品，所以一些第三方的开发者也在不断向其贡献特色化的组件。比如来说，在涉及到地理位置的时候，用户可能会需要一个地图指引，这时你就可以集 成“百度地图”的组件；在文章下面你可能需要评论体系，这时又可以用“多说”的组件；一些服务性的网页又可能需要客服，这时“美洽客服”组件自然也就派上 用场了。

　　当然，可能有些开发者会说，这些元素只是 Web 站点的一部分，当你真正来做一个 Web 站点时，你可能还需要各种各样的交互效果和文字排班样式。这时 Amaze UI 的 JS 组件和 CSS 组件的用处就显现出来了。

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

　　目前，Amaze UI 总共有近 20 个 CSS 组件、10 个 JS 组件和 17 款包含近 60 个主题的 Web 组件，按照 CEO 陈本峰的说法，和国外的一些 Web 前端框架相比，Amaze UI 会更多的考虑中文用户的需求。比如在字体排版上，Bootstrap 这套前端框架就没有定义中文字体，这样你的网页在不同的系统和浏览器下的展示效果可能都是不一样的，但 Amaze UI 中由于定义了中文字体而且针对国内市场份额比较高的浏览器做了优化，所以就可以避免出现这样的情况。

　　对于那些正在尝试做 HTML5 产品的公司来说，你可能还停留在 Facebook、LinkedIn 等大公司从 HTML5 app“叛逃”到原生 app 的阴影中，因为即使到了今天，一些人在谈到 HTML5 时还会举上面的例子。不过一位曾经在 Chrome 团队工作的工程师 Shinji Ikari 告诉 PingWest，Facebook 当初之所以会把 HTML5 app 做的那么慢，这更多的是 Facebook 自身的原因，而不是由于 HTML5 不行。因为从技术上来说，HTML5 的缺陷不是慢，而是不能 Scale。当时，Facebook 的 HTML app 还在用 XML，所以可以说他们的技术是相当落后的。

　　为了证明 HTML5 app 的性能不输给原生应用，Google 的两位工程师专门做了一个 Fastbook 的 HTML5 app 来表明 Facebook 的“叛逃”并不是 HTML5 的错。按照 Shinji Ikari 说法，两年前 HTML5 app 的性能就可以赶上原生 app 了，何况现在！

　　那么你或许会好奇，既然 HTML5 的性能不输给原生 app，那么我们平时看到的优质 HTML5 app 为什么这么少呢？对于这一点陈本峰觉得这更多的还是这一领域开发人员的技术积累不足。

　　Shinji Ikari 也表示，对于很多应用来讲，写成原生 app 几乎是必然的，如果你在写一个 3D 游戏，而不需要任何的 DOM（文档对象模型），那么根本没有任何理由使用 HTML。使用 JavaScript 不仅不会简化你的工作，还会让你的项目推进变得更糟糕。但是，像 Facebook 的这样手机应用，就是一个列表，没有什么可以超出 HTML5 的范围的内容，使用 HTML5 应该会得心应手，所以很多时候大公司对于技术的选择没有太大的借鉴价值。

　　好了，在解释了 HTML5 并不像人们想象的那么弱之后，也许你会觉得 Amaze UI 里的这些组件还不足于做出自己想要的产品，这也是 Amaze UI 选择开源的原因之一—让社区为其贡献更多的内容。如果你现在正在打算做 HTML5 产品，那么即便不选择 Amaze UI 框架，也不要让 Facebook、LinkedIn 这样的案例成为你的绊脚石。