说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

To Facebook:HTML5不好用?是你不会用!

HTML文档下载 WORD文档下载 PDF文档下载
作者Jamie Avins和Jacky Nguyen是Sencha的工程师,拥有丰富的HTML5框架及工具的开发经验,在听到Mark Zuckerberg表示“HTML5尚未就绪”后不以为然,在空闲时间开发了Fastbook这个纯HTML5应用,有力地回应了Zuckerberg。

虽然Mark Zuckerberg说HTML5尚未就绪,但我们对此不以为然。HTML5并不是Facebook移动应用反应缓慢的原因,我们很清楚最新的移动系统——iOS 5或Android 4.1——有多强大,不论是性能还是对HTML5的支持。

我们怀疑Facebook开发团队遇到了问题,不过这很正常。他们可能直接把网站开发思路直接套入HTML5移动应用开发上了,导致应用反应迟钝、加载缓慢、用户体验差。但是我们在HTML5框架、工具以及应用开发上有足够经验,所以决定在空闲时间挑战Facebook,最终成果就是这个Fastbook,你可以试试看HTML5究竟可以有多快。我们的结论是:HTML5已经足够面对很多复杂应用的挑战,不是“HTML5 IS NOT READY”,而应该是“HTML5 IS NOT JUST READY”!

或者你也可以观看这个视频(墙外),比较我们的HTML5应用跟Facebook原生iOS(v5.2)、Android(v1.9.12)版本应用的速度。本视频录制时间是12月10日。

iOS 5 - Native vs. HTML5

Android 4.1 - Native vs. HTML5

以下是开发过程:

细看Facebook原生应用


我们试着理解Zuckerberg关于“HTML5尚未就绪”的发言,最好的方式莫过于深入研究Faceboook最新的iOS原生应用。我们把一台iPhone联入网络调试代理(web debugging proxy)中,观察它推送的HTTP信息流。当时我们就震惊了,它传输的大部分仍然是HTML网页数据!News Feed页面和个人信息页面“原生化”了,但很多其它UI依然是向m.facebook.com发送HTTP GET请求。其所谓的“原生”应用也不过是Web/Native混合应用:从m.facebook.com上获取内容,再使用UIWebView以及原生Objective-C组件混合显示。

重新实现News Feed


分析完Facebook原生原生应用的结构,结果就很明显了:News Feed是整个应用中最难实现的部分。News Feed需要处理10亿级别用户发布的无数信息,即使是最有经验的程序员也很难处理这样这种不确定的难题。

那么首要目标就确定了,我们需要使用HTML5实现一个足够流畅的News Feed界面,为此还需要往Sencha Touch框架的核心添加一些新功能和改进。

首先,需要实现一个无限长度的链表,来处理未知数目的信息条目。填充屏幕可见区域只需要几组DOM节点,然后它们将根据需要不断地被回收,以呈现下/上一条信息。这就保证无论存储的数据有多少,内存占用率总是最低的。实现起来也很简单,真正的难点在于如何快速处理各式各样的信息条目,瓶颈在于浏览器无法避免的核心过程:布局与UI绘制。

经验表明,一个小demo在演示中表现良好并能够不代表它一定能在大型应用中正常运行。DOM树往往会随着应用的扩展慢慢变得臃肿,于是浏览器需要花费更多时间来设计布局,最终导致应用性能下降。此外,随着可见层数目的增加,各层合成视图的性能也会下降。我们需要一个能够在DOM节点数目庞大情况下的解决方案。

为此我们重新设计了一个“Sandbox Container”,它可以分解复杂的视图,并在独立的iframe中渲染,这样就分割了DOM树。这种特殊的容器不需要在应用程序级别做任何额外的处理,因此可以无缝地提供给开发者(例如:任何添加到该容器的组件都会自动地被沙盒化。)。但它也需要付出相应的代价:事件、定位、样式处理和JavaScript代码在父窗口和子沙箱间都必须使用用代理。

这很复杂,因此必须有一个健壮并且合适的框架辅助实现。我们采用的是Sanfboxing,能够独立地计算布局,因此尽可能地保证了主DOM树的轻量。为了保证性能平衡,必须慎重地使用沙箱。

Fastbook中,News Feed、Timeline以及Story视图都存在于独立的沙盒。因为所有DOM原生都被频繁地重用,来渲染请求得到的数据,回流(reflow)是不可避免的。关键在于如何尽可能降低该过程的性能开销。虽然News Feed是更大DOM树的一部分,但Sandboxing能让News Feed像是在独立运行一样。

接下来,将其深度集成到我们的TaskQueue(我们最近引入Sencha Touch的新功能)中,TaskQueue能够预防DOM交叉读写请求,避免不必要的布局绘制。结合新的沙盒技术,能够显著减少复杂视图,如Timeline和News Feed这样非常消耗性能的布局。

之后添加的是AnimationQueue,响应式地实现动画和事件,此外还负责复杂任务调度到CPU空闲时间执行。它的作用类似于交警:为不同的任务设置不同的优先级,以保证程序一直保持响应状态。应用在绘制动画时将会暂停低优先级的功能,直到应用空闲时才重新执行被暂停的任务。此外,繁重的任务将会借助一个高频率计时器以非阻塞方式执行。这些都是为了保证触摸事件总有机会尽快处理。

当然,你可能不希望暂停部分功能中的类,比如“读取更多信息功能”。为了保证该功能不会导致流畅度的降低,我们使用了Web Workers,可以从UI线程中移除XHR/RPC通信。此外Web Workers还降低了网络请求以及JSON加/解密的消耗,同时更好地利用了当今多核设备的性能。

以上是Fastbook的设计要点。纯粹开放标准的Web技术给我们带来了如此优秀的性能,更让人兴奋的是,我们用HTML5实现了Facebook原生应用所有的功能。

加分项


我们在调查Facebook原生iOS应用网络性能时发现了一件有趣的事情,API请求会返回大量原始数据到客户端。举个典型的例子:通过API向https://graph.facebook.com/graphql/发送请求来渲染News Feed条目,平均每10条信息会下载15-20KB gzip压缩过的JSON数据,但其中大部分数据都不会被使用到。

为了优化网络流量,我们使用了一个代理服务器来过滤Facebook FQL API返回的无用信息。因此Fastbook比Facebook原生应用更节省流量,只占后者的10%。

也许你还注意到Fastbook和原生应用滑动减速上的不同:原生应用大概3s后才会停下来,而我们把滚动时间缩减到了1.4s,便于缓冲信息,同时为预渲染提供了时间。

结论


Fastbook并不是Facebook应用的替代品,它只能算是一个技术demo,为了证明HTML5的能力及价值。如果你对于HTML5是否准备好了还存有疑虑,请使用我们的Fastbook,只需要一台现代智能手机(我们推荐iOS 5或者Android 4.1以上)。你会发现,只要以正确的方法使用正确的框架,即使是HTML5也能完成非常复杂的应用和特性!

原文链接:Sencha

千万级并发实现的秘密:内核不是解决方案,而是问题所在! Apache RewriteRule重写规则语法入门 IDC:2013 Q1 Android和iOS出货量占92% WP首超黑莓 传雅虎欲10亿美元收购轻博客网站Tumblr A Beautiful Mess:如何赚男人女人的钱 CSS、JavaScript开发者必备的10款最佳工具 IBM推出API管理平台 抢占API经济市场份额 2013中国云计算榜单之一:15云平台,谁主沉浮? 移动周报:百万壁纸、85后程序媛,我为梦想代言! 电信天翼开放平台:为App开发者免费提供云存储和云主机服务 Google新的Web UI库:Ploymer 研发周报:让开发者高效编程的10个新框架 拯救行将就木的PHP:谷歌为GAE添加PHP支持 PPT集萃(一):10位业内高管分享云计算技术理念与行业趋势 得益于苹果谷歌,未来可穿戴技术市场规模可达500亿美元 雅虎11亿美元押注Tumblr三大因素:用户、社交、内容 Perceptual:英特尔感知计算挑战赛 正式启动 吴义坚:创业去!我用深度神经网络,处理语音识别 浅谈用户体验的“反面模式 可穿戴设备又一站:增强现实眼镜CastAR 数字医疗投资将破纪录 投资人看好这些细分领域 Mayer又下一城:雅虎收购Tumblr推进移动化? 前端开发利器:代码预处理工具Prepros 一个轻量级的JavaScript库:Reactor.js [探讨] 用户体验设计师现在面临怎样的机遇和挑战? PPT集萃(二):淘宝、CloudStack等分享的架构经验与最佳实践 2013中国云计算榜单之二:64家云主机+云存储,错综复杂! 看Java技术基础的eBay如何评价他们的Node.js首次尝鲜 Jolla发布首款Sailfish系统手机 无缝兼容Android应用 NPD:全球智能手机出货量2013年将首次超过功能手机 聚合数据左磊:不走寻常路 做国内最好的数据聚合平台 我的IE不能打开新窗口?用鼠标左键点击超链接没有反应? 我的项目改变目录后打不开,怎么办? 多CPU机器,同时可有几个线程处于运行状态? 高分求高效高斯模糊算法。。 如何判断软件是否过期 是不是运行ASP.Net应用的服务器必须安装.Net FrameWork呢?还是只要有Win2000 Server和IIS就行。 谈情说爱 清除内存中用call调用的脚本文件? 一个很老的问题,如何避免CListCtrl闪烁。 请大家给看看程序:avi视频读取和重建 研究数字图像处理应该那些知识? 图片上传并显示实例(VB+SqlServer2000) SQL语言中 怎样将CHAR型转换成INT型? 級連更新... 怎么实现回车自动跳到下一个位置 如何在光标处插入字符? CSSCLASS高手关注,我想把ListBox、DropDownList样式改为平面,而且颜色边框为1颜色不为灰色,用CssClass具体怎么写呢?越详细越好?多谢 求一招:::怎么对付那些那了代码就不给钱的家伙???? =========发誓:远离csdn!================ phpmyadmin为何安装不成功? 谁有crystal reports的电子书。 这个radio的返回值是什么? 离开csdn,公布密码!!!!!!!!! 新手!求界面问题的答案! javascript面相对象的编程 IMail邮件系统的问题 七月七,我不在她身旁. 可是很想她.我爱她. 高分!求一简单问题。 今天七月七了,代表所有单身人员向全体女单身同胞问好,同时也祝成双成对的人永远快乐!! 请问php中二维数组怎么定义和初始化? 难题---SQL Panel2.Width/2;应该怎样改 求: Rational XDE 2003 (带破解的),分不够可以再加,要多少给多少,很急! 这个存储过程怎样调用? 在有限区域中打印文本,文本长度若超出,则压缩间距,否则正常显示 急,高手请进! 如何重新加载select? 怎样做一个网页编辑器(windows form)大家给个思路 强烈建议 删除 {{轰动上海大学的偷拍事件录像下载地址 (yy795188 ) }}的贴子,否则版主失职 用Authorware能够作出象隐藏在框架里的菜单吗? 我的程序需要定期执行一次,怎么写呢? 请各位大侠帮忙分析分析,我大概还有300分的可用分,解决的话,全送你了(300分) 日历 这是Mysql的BUG吗--彬、斌--如何分别查询 如何利用XML中的xsl进行信息的交换 为什么我新建项目时不行? 求教:有没有象outlook一样的文件管理软件?? 怎樣利用datalink和可更新快照進行雙机數据同步一制備份?急救!急救!在線等待!! 我学flash怎样才能入门了~~!我现在不知道怎么下手~~! 请问这个ASP文件怎么转成JS文件以便调用?? 急:那位仁兄提供存取BLOB字段的代码,数据库为ORACLE. 什么是药物反噬? 初中科学.15题.急求科学学霸! 春往而东反得反噬什么意思 反噬是什么意思 目送阅读答案 等底等高的圆锥与圆柱,体积相差120dm³,求圆锥和圆柱的体积各是多少? 等底等高的圆锥与圆柱,圆锥体积比圆柱少60dm³,求圆锥与圆柱的体积各是多少? 等底等高的圆柱和圆锥的体积之和是48dm³圆锥比圆柱的体积小() 一个圆柱和一个圆锥等底等高,它们的体积相差14dm³,这个圆柱的体积是多少?这个圆锥的体积是多少? <施公案>,<济公传>,<彭公案>,<三侠武义>,<古文观止>都是谁写的? 彭公案是谁写的要朝代和国籍 伊拉克首都发生多起汽车炸弹爆炸 至少近年典型捂堵拖事件盘点:山西2起事故第九届两岸经贸文化论坛提出19条共同河南连霍高速大桥炸塌事件至今未公布处纽约华裔社区发生命案5人被杀 死者包伊拉克首都发生多起汽车炸弹爆炸 至少纽约华裔社区发生命案5人被杀 死者包世界主要城市10月28日天气预报最高层着手“顶层设计” 中国周边外交“舞动浙江”华丽登场 我省万人排舞大杭州今晨创“入秋”后最低气温 下周全一片雪今起并轨朝鲜要求韩美停止“乙支自由卫士”军演司机不开门,她竟从车窗跳下美针对西非埃博拉发布最高级旅行警告新闻分析:长期“自满” 美股跌跤不惊42岁姚明前队友拍卖奥运金牌 生涯收阿根廷足坛教父辞世城市信报图文版8月去看小海狮吧杭州经信委原主任坠楼遗书自称未违法
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘