Fastbook:Sencha 想要证明 HTML5 现已“就绪”

  • Abel Avram
  • 张龙

2013 年 1 月 10 日

话题:FacebookHTML5语言 & 开发架构

不久前,Sencha 创建了 Fastbook,这是一个模仿 Facebook 原生应用的 HTML5 应用,在 iOS 与 Android 上的性能表现差不多,Sencha 借此想要证明“HTML5 现已就绪”。

Facebook CEO Mark Zuckerberg几个月前曾经说过“公司最大的失误就是在 HTML5 上投入太多,因为 HTML5 尚未就绪”,公司决定为 iOS 与 Android 创建原生应用,后者在一周前已经发布。常见的说法是 HTML5 尚未“就绪”、速度不够快、由于缺少合适的工具导致开发起来困难重重。

来自Sencha(创建了 HTML5 及工具的知名公司)的两位开发者决定证明 HTML5 已经就绪,并通过几个月的业余时间创建了Fastbook。Fastbook 是个 HTML5 应用,模仿了 Facebook 的原生应用,通过 Facebook API 进行真实的 FB 数据访问(你应该在移动设备上使用该应用,在桌面浏览器中似乎不行)。

下面的视频展示了在 iOS/iPhone 4S 与 Android/Galaxy Nexus 上对原生 Facebook 应用与 Fastbook 进行的测试。令人惊讶的是,在加载动态新闻并滚动新闻时,HTML5 应用的性能与 FB 原生应用一样好,在几处甚至还超越了 FB 应用(也许需要翻墙才能观看视频——译者注):

  • 在不同视图间切换时,HTML5 应用会缓存数据。FB 原生应用则会重新加载动态新闻
  • Fastbook 使用了嵌套的无限列表来展示评论,这提供了更棒的用户体验
  • Fastbook 还提供了 landscape 布局
  • 在 Android/Galaxy Nexus 上,HTML5 应用加载数据的速度要快于原生 Facebook 应用

Fastbook 创建者认为如果使用“网站开发方式”并且没有使用“正确的应用开发工具”的话,那么 HTML5 应用的表现就会很差劲。

他们还发现 Facebook 的原生应用至少有两处大的瑕疵:

  • 它依然是个混合应用:“News Feed 已经被移到了本地,并且拥有设定页面,但很多其他应用 UI 只是简单地向 m.facebook.com 发送 HTTP GET 请求而已。现在的原生 Facebook 应用是个混合 Web/ 原生应用:既有在 m.facebook.com 上渲染并在 UIWebView 上显示的内容,也有原生的 Objective-C 组件”。
  • 它所传输的数据超过了自身的需要,每 10 个条目就需要传输 15KB 到 20KB 的 gzip 压缩 JSON 数据,这其中很多数据并不是渲染实际视图所需要的。在代理服务器上清除 FB 数据后,Sencha 团队将数据传输量减少了 90%。

为了让示例能够成功运行起来,Sencha 对其 Touch 框架进行了几处改进:

  • 为拥有未知数量条目的页面添加了一个新的 Infinite List 组件。该列表包含了少量 DOM 结点,可以重用以渲染前一个 / 下一个条目。这有助于减少内存使用量,并且会极大降低大页面的渲染时间。
  • 添加了一个新的 Sandbox Container,“以编程的方式拆分复杂视图并将其渲染到自己的 iframe 中,这会将 DOM 树分割开来”。这么做的好处在于,动态新闻显示会更快,因为 News Feed、Timeline 与 Story 视图现在可以使用不同的容器了。
  • 与现有 Task Queue 更好的集成,这可以“防止对 DOM 读写的交叉,消除了不必要的布局。这与新的沙箱技术的结合能够极大减少复杂视图代价高昂的布局,比如说 Timeline 与 News Feed”。
  • 添加了一个新的 AnimationQueue 类,它会将耗时的任务推迟到 CPU 空闲时执行。这对滚动很有帮助:当用户快速滚动动态新闻时,图像加载与渲染会暂停,直到滚动停下来为止,这是一种推荐做法。
  • Fastbook 使用了 WebWorkers,它可以在单独的线程而不是 UI 线程中获取数据,使得滚动更加平滑。

如果说去年夏天 HTML5 还不行的话,那么 Sencha 的这个示例就表明了现在的 HTML5 可以与原生应用一样快,这证明了 HTML5 现已“就绪”,即便对于 Facebook 这种大型 Web 应用来说亦是如此。

Sencha 还发起了HTML5 Is Ready,这是一个应用竞赛,提供了 $20,000 奖金和设备,为的就是证明“优秀的开发者配上优秀的 HTML5 工具是可以开发出惊艳的应用的”。

查看英文原文:Fastbook: Sencha Wants to Prove HTML5 Is “Ready”

FacebookHTML5语言 & 开发架构