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”

译者 张龙 热衷于编程,乐于分享,对新技术有强烈的探索欲,对Java轻量级框架有一定研究。

This entry was posted in ASP.NET. Bookmark the permalink.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s