本文来源于我在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应用
<iframe height="299" src="http://player.vimeo.com/video/55486684?autoplay=0" frameborder="0" width="497" mozallowfullscreen="" webkitallowfullscreen="" allowfullscreen=""></iframe>
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”
分享到:
相关推荐
///// 快书 这些笔记本介绍了深度学习, 和 。 fastai是用于深度学习的分层API; 有关更多信息,请参见。 此回购协议中的所有内容均受版权保护,由Jeremy Howard和Sylvain Gugger于2020年开始。...
python库。资源全名:fastbook-0.0.16.tar.gz
快速手册设置代码 此代码是您安装fastbook时安装的代码的修改版本 pip install fastbook 有关更多信息,请参考fastai或 的。
快速AI Colab笔记本测试Fastbook的代码
FastBook VIN Finder Chrome扩展程序 19/5/28发行说明:V 1.2.1-进行了较小的更新,以改善开发/调试过程 19/5/22发行说明:V 1.2.0-在预订面板标题中添加了当前登录的用户 19/4/29发行说明:V 1.1.0-悬停在FastBook...
如何在计算机视觉、自然语言处理(NLP)、推荐系统、表格和时间序列数据分析中创建最先进的模型:《Deep Learning for Coders with fastai and PyTorch》 如何使用全新的fastai v2库和PyTorch 深度学习的基础:什么是...
我的fast.ai fastbook和v4回购 :grinning_cat_face_with_smiling_eyes: fastai让我很高兴,能够最终将ml付诸实践! 注意:YouTube和网站上的视频讲座非常不同。 最好的地方是网站,我希望它会更新为最新内容。 ...
pip install -Uqq fastbook import fastbook fastbook.setup_book() [K |████████████████████████████████| 61kB 4.3MB/s [K |███████████████████████...