BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Abel Avram 关注 7 他的粉丝 ,译者 张龙 关注 12 他的粉丝 发布于 2013年1月11日. 估计阅读时间: 5 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这槽吐得漂亮 by yi yang

觉得不对,就写出来证明,非常漂亮,比什么都有说服力

非死不可嘛,说话要小心了,自己证明不了的题目! by harcker Dobby

非死不可嘛,说话要小心了,自己证明不了的题目!不要急着进行否定!这样会误导别人!

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

2 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT