jQuery MiniUI,Ajax Web开发

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