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

不久前，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”