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

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

Qubole:托管在AWS平台上的Hive服务 自由操作系统 Debian 正式发布7.0版本 4月份浏览器份额:IE 8仍居第一,IE 10翻番 亚马逊正式在华推Android应用商店 收入3:7分账 不要男孩,只允许女生参加的四所编程学校 下一波App机会在哪里? JS1K 2013优胜作品公布 3D蜜蜂仅获亚军 专访:前新浪网架构师徐佳转行卖水果背后的故事 FBI密码挑战,你能解开吗? 从0到1只需一天:Twitter后PC时代物联网“敏捷”开发之路的探索 机械生物已经面世 只少个“大脑”而已 百度正式宣布3.7亿美元收购PPS视频业务 比尔·盖茨:iPad让人失望 用户需要Surface Dropbox将于今年夏天举办有史以来的第一场开发者大会 Clustrix Sierra分布式数据库系统:云计算时代的MySQL 英特尔出杀手锏 发布低功耗、高性能Silvermont微架构 10大最实用的Raspberry Pi扩展设备推荐 主流浏览器性能测试,IE10百分百完胜! TortoiseSVN的基本操作 再见,Fireworks! 投资者告诉诺基亚CEO:他们快没耐心了 直接拿来用!最火的Android开源项目(二) 营收奇迹:三消游戏Candy Crush Saga成功启示录 马化腾对话李连杰:移动互联网的能量有多大? UC与趋势科技携手,移动浏览器加固安全 乐视发布超级电视X60 售价6999元 巨头们抢滩或已结束?EMC掀起首场SDN登录战 CloudStack创始人梁胜:让中国软件走向世界 ArduinoDroid:让你在Android设备上开发Arduino 码农们的机器人:LEGO MindStorms EV3 详解 JavaScript 中的 this 她问我“上个黄色网站让我看看”, 是什么意思????????? 怎么样能提高IE的速度? 你的DELPHI6的帮助有没有这种问题? 请推荐几处下载java编程方面电子书的站点? 请问有没有工具把access中的文字繁简转化一下?? 找一个高人——HC 请教如何使用API中的GetUserName()? 怎样才能买到 外文期刊??? 如何将一屏显示不下的文档打印在一页当中(CHtmlView) 请问《程序员》杂志上的那几本外文期刊怎么买??? 我下载了几个rar文件有*.rar\*.r01\*.r02等等,可是这个网站没有提供合并文件,忘了怎么合并了,谁知道快告诉我。copy *.rar+*.r01不管用 请教在线的高人(在oicq上吗?) 我是白痴!大虾,什么是专家分,怎么得,有捷径吗???????????? 图形化界面问题!控件与窗体不重合! 书上的东西我看不董,是关于PB70与COM/MTS的,COM/MTS是什么,谁能告诉我? 怎么样能解决死机的问题? 跟帖比聊天有意思多了,哈哈 过去了,就不要再提 灌水乐园,我的MUD练功场 StringList 与 String的区别 为什么我的组合筐里只有最后的项,即"交叉线",没有其他的内容? 关于Tmemo 共享软件的开发经验 部件(Crystal Repot)引用错误(crystl32.ocx),请高手指点,,谢谢 无数个问题之123 steps你有oicq吗?壮丁!!!sos 怎样将数字字符转化为数字呀? WIN98下能读的光盘到了WIN2000/NT下居然读不出来! WIN98下能读的光盘到了WIN2000/NT下居然读不出来!(我的光盘是刻录的) 我不想要分(也许我只是个女生) 40分=一网址:那儿有Effective C++ 2e电子书? 如何在菜单中加入下拉框?像delphi的那样. 怎样用vb程序实现监控打印机打印输出情况 大家评出水园最有人气的mm,我给分啊,行动要快啊~~~~~~~~~~~~~~~~~~~~明天晚上7点结贴 编译servlet文件出错!急!!!! 寻觅朋友(用delphi优先) 我希望能认识安徽的程序员~~~~~~~~~~~~~~~联系:6011458(OICQ) 很长时间,我还是觉得这是一个事实! javascript中怎么进行数据类型间的转换? 关于非文档视图结构程序的菜单 寻delphi兼职程序员,要求比较懂数据库,多劳多得,不劳不得,报酬从几十元到几千元不等。 在程序中更改Filter to lastlove(☆)robin(★) 关于《深入浅出MFC》电子书 SOS:秦皇岛的小男孩胡颖1岁胡颖1岁8个月,得了白血病,希望大家帮助他,留住他的小生命 所有武大的GGDDJJMM进来报名 所有深圳的GGJJDDMM报道 请各位汇编高手看看这个程序,帮忙找一下错误。 无法安装REDHAT LINUX? inet控件怎样使用?请帮助 今天卖到一套D版VS7(6CD)不知道是真是假 英语中的词性表示是什么意思,例如n表示名词,v表示动词,adj又是表示什么呢?还有其它的 英语中一些单词的词性是怎么变的?比如说名词变为动词等·有什么规律的吗? 双音节词概括表示心理特点的双音节词语 “的”,“得”,“地”各修饰什么词性的词语,有什么区别呢? 英语中以ment结尾的单词既有名词词性又有动词词性的有哪些.如:fragment就是.急 表示心理活动的词语 一个词多个词性,怎么区分?比如说hesitate这个词.hesitation和hesitance都是名词,那应该怎么区分? 汉语双音节词语是什么 表示心理活动的词语.例如:表示心理活动.例如:爱 恨 想 忘记 觉得 感到 希望 羡慕 憧憬 回忆.动词,一个字或两个字,阅读需要!不能有误,有误不给分,若收集500个以上,奖50-100分 帮我辨别一下下面的一些词的词性呀!急就是感情色彩(褒义贬义或者中性)荒唐 异想天开伶俐 无缘无故洋溢 跳梁小丑谦逊 不屈不挠攻击 孜孜不倦谗言 飞黄腾达战争 人迹罕至 什么是双音节词语? 表示心理活动的词语有...不急!不急!不急! 一个词性多个词,怎么区分.比如说hesitate这个词.hesitation和hesitance都是名词,那应该怎么区分? 双音节词语是什么,请举例 表示心理活动的词 《现代汉语》指出下面句子中括号里词的词性.1、你(在)哪里?2、他(在)做作业.3、你(在)哪里工作?4、由你(把)门,谁也不许进来.5、拿(把)锁(把)车锁上.6、他(给)了你一本书 什么是双音节词 词的分类 实词包括名词、动词、形容词、数词、量词、代词.标明下列各词组的词性:坚决——决心( ) 可爱——热爱( ) 荣誉——光荣( )企图——意图( ) 答案——答应( ) 气愤 写出句子中各词语词性.1.东京也无非是这样.2.恩师是让人永远怀念的.3.看,于茂林修竹之中,一潭清泉又呈现于眼前.4.谁说宇宙是没有生命的? 现代汉语中单音节词和双音节词的区别 名词,动词,形容词,数词,量词,副词,的定义举出一些属于这些词的一些词语.按类别在找5个例句.定义最重要 写出下列句子中词语的词性.1.我们的生活十分美好!2.昨天的语文作业我还没做.3.黄色菊花已经盛开了.4.两双皮鞋才卖了陆拾圆!5.他家比我家近.6.一只狗和一只猫都丢了.7.炎热的夏天简直太长 在汉语中什么是单音节词》?和双音节词 能否举例?多举几个! 用十二种词性的词造一句句子. 12种词性为:名词、动词、形容词、数词...用十二种词性的词造一句句子. 12种词性为:名词、动词、形容词、数词、量词、 代词、副词、介词、连词、助词、 “了”在汉语句子中是什么词性是形容词?连词?还是副词? 什么是汉语单音节词和双音节词,怎么定义的?谢谢 用实词中的(名词,动词,形容词,数词,量词,代词)写四词的对联 英语中什么叫系动词 什么词性的词可以做 在汉语中什么是单音节词》?和双音节词 能否举例?谢谢朋友们的回答了. 名词动词形容词数词量词代词各写10个 语文各类词词性及其用法 下列加点的字中表示的单音节相当于现代汉语中的哪个双音节词?有仙则(名):有龙则(灵):苔痕上(阶)绿 :惟吾(德)馨: 英语的名词动词代词形容词副词量词连词冠词 关于几个词的词性(语文)求几个词的词性,准确的说是判断这几个此是什么短语.1、目空一切2、一视同仁3、一笑倾城(从以下几个分类中选:偏正短语、主谓短语、后补短语、动宾短语、 木兰诗结尾一节诗句有什么含义 安全它的动词 形容词 副词 名词 对、在、从、以、为这些词在语文中是什么词性的是不是介词? 1,木兰诗有怎样的特点,用双节音词概括 对联中名词对名词,动词对动词,形容词对形容词,副词对副词什么意思?语文中 名词 动词 形容词 副词 这些是什么意思?详细点 !` 我这人语文基础不好 1.对下列句子中加点词的词性,分析正确的一项是( )①小王曾经跟老张到过俄罗斯 ②小王跟老张到过俄罗斯③小王跟着老张到过俄罗斯 ④他的思想跟不上形势 (加点的字都是 跟)A.①介词 ② 木兰诗叙述的事一个怎样的故事?你能用一个四字词语概括吗?这个故事又怎样的特点木兰诗叙述的事一个怎样的故事?你能用一个四字词语概括吗?这个故事又怎样的特点?你能用一个双音 辨析词语的词性 语文中各种词性的词有符号表示,比如:主语用双横线,谓语用单横线等.英语中有这样的表示方法吗?如果有,和中文的有什么区别? 木兰诗的语言特点“东市买骏马,西市买鞍鞯 ⑿,南市买辔头 ⒀,北市买长鞭.'和"爷娘闻女来,出郭(Ⅸ)相扶将(Ⅹ);阿姊闻妹来,当户理红妆(Ⅺ);小弟闻姊来,磨刀霍霍向猪羊."就说是什么特点好 辨析下面词语的词性春天( )像( )刚( )落地( )的( )娃娃( ),从( )头( )到( )脚( )都( )是( )新( )的( ),它( )生长( )着( ) 安排这个词的词性是名词还是动词? 用一个双音节词语概括本文内容(童趣) 现代汉语语法中,动词有无感情色彩?带有感情色彩的词主要是哪些词性的词? “用途”一词是什么词性?如名词、动词什么的? 表示看的词语,单音节和双音节个七个. 现代汉语:从结构,词性,语法意义,语法特征等举例分析某个合成词(举例的例子要标明出处,包括作者) 谁能告诉我英语词性的缩写(全部)带解释那种,感谢赏 "到过"一词的词性是什么?是名词还是动词? 什么叫单音节词,什么叫双音节词关于形容词比较级.越多越好 所有英语词性符号简称注意,是简称哦. interest empty 用这两个词语造句,名词和动词.两个词性各造一个 写出单音节表示颜色的词语6个,多音节、双音节表颜色的各6个 英语词类 词性 有什么区别 判断下列各词的词性,按名词.动词.形容词分类!急啊!1.歌颂2.颂歌3.询问4.学问5.勇敢6.勇气.7.创造8.创举9.热烈10.激烈11.障碍12.阻碍13.活力14.活泼15.灵活16.措施17.实施18.整齐19.整理20.整体 什么是单音节词,双音节词,多音节词?单音节词、双音节词和多音节词是什么?怎么区分?大家讲得简单一点我现在是初中阶段
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn