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

本文来源于我在InfoQ中文站翻译的文章，原文地址是：http://www.infoq.com/cn/news/2013/01/Fastbook

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