Sencha指出Facebook的HTML5慢的原因

还记得〈FB 执行长祖克柏坦承：採用 HTML5 是脸书成立以来最大的错误〉这个消息吗？

Facebook 创办人兼执行长 Mark Zuckerberg 今年 9 月出席《TechCrunch》Disrupt 大会时，曾抱怨用 HTML5 写出的 Facebook App 又慢又不稳定，总是没办法达到他们想要的品质，因而推出原生版的 Facebook App。

这席评论，惹火了众家 HTML5 的拥护者。现在 Sencha 的一群工程师，做出和官方 Facebook App 一样的 App，还颇具挑衅意味的取名为「Fastbook」，他们要以此证明：

「HTML5 绝不是 Facebook 行动 App 龟速的原因！」

纯 HTML5 的 Facebook App，到底可以有多优？
Sencha 是一家来自美国加州的行动 App 服务商，旗下许多行动 App 开发工具如 Sencha Touch，在欧美或中国，都有许多开发者社群。

他们在研究 Facebook App 之后，决定直接挑战最难的部份，也就是动态时报（News Feed）及相关的页面间切换。并在昨晚，公开了他们利用「闲暇之余」做出来的成果：

从短短 4 分钟的影片中，可以发现 Sencha 的纯 HTML5 App（右侧）胜出 Facebook 官方 App（左侧）之处：

＊ 页面间切换更顺畅，资料不需重新载入：例如进行新闻信息与个人档案之间的切换时，资料不需重载，使用者经验流畅。

＊ 藉由「无限列表元件」（Infinite List Component），Sencha 的 HTML5 App 可以一次呈现更多信息留言，不会像官方 App 一样卡卡的。

HTML5，真有这么神？

Sencha 是如何做到的？
他们的作法包括：

＊ 相对于官方 Facebook App 为混合式 App（hybrid app），Sencha 纯以 HTML5 实作。

＊ 由于资料全串接 Facebook 的公用 API，因此与伺服器间的资料请求时间，将直接反映在 App 执行速度上，故 Sencha 在请求的资料量上，花了相当大功夫来优化。例如透过代理伺服器来处理、过滤掉自 Facebook API 取得的资料量 －－ 同样的新闻笔数，Sencha 的 HTML5 App 只需要 10% 的资料量。

＊ 以任务阵列（TaskQueue）避免与 DOM 之间的读写间插，减少不必要的排版（layout）。

＊ 以新增的动画阵列（AnimationQueue）此类别，来优化动画或事件的处理优先顺序。例如当我们在 Facebook 墙上快速捲动时，动画阵列就会暂停图片的载入，直到动作停止。

网友抗议：两者比较基础不同！
部分网友认为，iOS 原生 App 使用的是 WebView 的环境，而 Sencha 最初公开的 HTML5 App，是採用纯浏览器的环境，因此在 JavaScript 的处理上有较多优化。

对此 Sencha 说明，这项以 HTML5 优化 Facebook App 实验的瓶颈，并不在于 JavaScript 的执行表现，而是在整体程式架构的优化。Sencha 还将相同的 HTML5 App 以原生 WebView 的环境包装，让网友下载比较：github.com/extjs/fastbook

Sencha：开发者的功力与思维才是重点
Sencha 的核心技术人员 Jacky Nguyen 补充说，「Fastbook」 无意取代官方 Facebook App，但许多团队常以开发「网页」的思维，来开发一个 HTML5 的行动 App，而这是不对的。他认为，这就是 Facebook 当初使用 HTML5 开发 App 时的心态，才造就一个又慢、又不稳的使用者体验，他说：

「这个 Demo 影片，只是用来展现开发者可以如何用正确的方法、架构及工具，好好运用 HTML5。」

如果你现在刚好在用手机看《TO》的话，赶快来试试纯 HTML5 写的 Fastbook

原文:http://it224.com/26397.html