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应用(也许需要FQ才能观看视频——译者注):
- 在不同视图间切换时,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工具是可以开发出惊艳的应用的”。