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

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

Appflood SDK:连接中国与海外App流量交互平台 Apache Subversion 1.7.9正式发布! 微软IE浏览器5大动向 加速吸引开发者 开源的简繁转换库OpenCC支持Node.js 继Opera之后,Adobe表示将支持Google Blink 提高大型软件项目质量的一些实用型技术分享 谷歌推出Mirror API,开发者可为Google Glass开发应用 无需999,也不要499,99美元Linux超级计算机带回家 微软反击AWS:推出EC2并大幅降价,“价格战”正酣 Operation InVersion:拯救了LinkedIn的大修项目 五步走战略——Avocado在最初几周内迅速扩大30倍 NoSQL产品测评:Cassandra、MongoDB、Couchbase和Aerospike 谷歌眼镜开箱评测:比想象更精致 Pinterest谈实战经验:如何在两年内实现零到数百亿的月访问 初创公司Instart Logic:专为电子出版商和网站站长解决“痛点” 未来即卖芯片又卖服务!Intel收购软件厂商Mashery 继MSN之后,微软又开始整合Skype与Lync服务 阿里将推AMOS智能机 斥资10亿鼓励开发App AMPLab开发重构的Hadoop版本Tachyon:吞吐量要比HDFS高300多倍 一名理科生的创业路 十大界面原型与布局工具 Google产品经理Kenneth Norton:如何与工程师共事 如何创建自适应系统来增强用户体验 Jolla下月展示首款Sailfish手机 将重点发展中国区 海外1GB大容量游戏,国内渠道如何分发? 真正的能源大户是WiFi网络 数据中心只是“伪军” CloudFlare创始人传奇人生:7岁编程,法学博士,获哈佛商学院最高荣誉 2013云计算深入实践 jQuery 2.0发布 不再支持IE 6/7/8 Google再发力,更新Dart M4! 【多图】鼠标、光驱等13个即将消失的PC技术 奇怪的问题!!!!! 请问什么是contentPane? 用Delphi作网页用IE浏览不行 求助:AfxBeginThread的编译问题! 用C裸写聊天软件,谁能? 菜鸟问题:如何安装和配置ASP.NET开发和运行环境? 快来呀,破解QQ密码,高分相送! 有需要域名和空间的吗?我这里有。 我的服务器CPU占有100%,如何解决?!!加急!!!!!! 请问谁在csdn上订购过书啊?需要多少时间才能拿到啊!!!! 小问题:关于AfxBeginThread的参数调用问题 请教高手:关于在ACCESS中的两个数据库之间复制表结构问题 请问谁在csdn上订购过书啊?需要多少时间才能拿到啊!!!! 问题求解 现实一点,各位,我和别人赌了巴西不能赢中国队净3球以上,大家如何看? datagrid连接adodc access转化为mssql时出现的一些问题??? 工作流运行时出现了问题!很奇怪! 一个注册表的问题? 关于STL的弱问题 很少有人问的问题 请教学习路线,散分 一个困扰我很久的难题?(高手帮忙啊) 告诉帮我解决文件关联问题!! 请问如何添加备注字段,用sql server建表,有一备注字段为text类型。。。。。。。。。。。 函數啊﹐怎么么搞的?氣死人了。一百求救。 关于数据库的问题 生命游戏问题!!!!那位大哥指点迷津 VB做的免费软件,大家随便下载!给我提点建议也行! RichEdit问题,急!!! 关于IF语句。我是新手我理解不了请高手帮我,谢谢 请问oricle 有没有像sql server 2000 的企业管理器一样的工具? 关于richedit的问题! 誰能告訴我﹐我給他發又發(88分求找) asp.net就没有什么不足吗? 问题:高级程序员的《数据结构》该怎么复习?请有经验的人给指个明路,多谢! 如何将中文文件存入数据库?是文件,不是表单,谢谢!! 怎样才能得到CDialogBar的控件(如Button)的消息及消息处理 子数据窗口中为什麽filter条件不起作用?急急!!在线等!!!! 菜鸟来了! 怎么把Demo_Adhoc分到两台机上运行 数据库更新 how to 用 insert into 把一个.zip文件保存进数据库?? 请大家推荐一个CD机吧!!!! 急,NOTES与SQL SERVER的问题 asp实例 我的Access库文件原来大小是6.78M,我清空所有记录和减少很多记录时,为什么大小没改变? 关于delphi动态加载控件,在线 代人提问:请问.dcu文件是干什么的?如何才能生成该类型文件。 怎么响应Enabled属性 asp.net做网页,运行后,<asp;....></asp:...>字段仍然存在?? ABCD是含有同一种元素的不同化合物,焰色反应都呈黄色,A——E相互转化关系如下:(1)B+C→D+H20 (2)B→D+E+H20 (3)C+E→D+H2O (4)A+E→D+O2 (5)A+H20→C+O2则:A为______ B为_______ C为_______D为_______ 谁知道熔化是什么热?吸热还是放热? 离心泵的输送介质改变后对泵的性能如何变化 已知A是一种常见的正盐.A、B、C、D、E均为化合物,且均含有一种相同的元素.Y是常见的气体单质,A既能与盐酸反应产生气体,又能与氢氧化钠反应产生气体.在一定条件下,A能实现如下图所示的转 放热就是变热,吸热就是变冷吗?如果不是请讲明为什么.急,明天就考了,还是弄不太明白.我有点笨,讲明白点.如果我懂了一定还加分! A和B可以相互转化,B在沸水中生成C,在空气中氧化成D,D有臭鸡蛋味.那么ABCD分别是什么? 为什么燕子往南飞 请问一个高压水泵电动机的转速,流量和流速的相关计算公式是什么? A和B可以互相转化,B在沸水中生成C,C在空气中氧化成为D,D有臭鸡蛋味,请问ABCD分别是什么?我要正确答案d是硫化氢那种的,不要鸡蛋系列的那个答案额,能把化学方程式写上么? 两种气态烃组成的混合气体0.1摩尔,完全燃烧得0.15摩尔二氧化碳和3.6克水,A:一定有乙烯B:一定没有乙烯C:一定有甲烷D:一定没有乙烷 已知管内空气的流速,求所用空气泵的功率,其计算公式是什么? 酒店用液相煤气瓶内液态气体的温度是多少?天气寒冷液相煤气瓶出口压力很低?是什么原因? 下列肥料中,可跟草木灰混合施用的是( A (NH4)2SO4B NH4ClC KNO3D Ca(H2PO4)2 什么是液相负荷? 新买的PE液相的压力老是往下降,是怎么回事 偏铝酸根能在强酸强碱溶液中大量存在吗?为什么? 锅炉燃烧火焰以什么颜色为标准 碘与水反应生成的碘化氢加不加上标 偏铝酸根与少量强酸反应的离子方程式 草木灰的水溶液能与哪种化肥混合施用?(选择)A CO(NH2)2B NH4ClC NH4NO3D (NH4)2SO4 高效液相色谱 压力不稳定怎么解决 将某温度下的氯化钠的不饱和溶液恒温蒸发掉一部分水,可变成饱和溶液 这句话是对的还是错的? 除去KNO3固体中混有的少量NaSO4所进行的实验操作依次为___,蒸发___结晶,___蒸发,干燥..... 氢气与气态碘反应生成的碘化氢是气态还是液态? 将偏铝酸根滴入强酸的分步反应式 酸雨对下列设施的腐蚀作用较强的是( ).A.铝制窗框B.木质围栏 岛津液相泵压力不稳定!LC-10AVP 疑难杂症!急……仪器是测奶制品中的三聚氰胺!在用药典方法配制的流动相(柠檬酸+辛烷磺酸钠:乙腈=9:1)时,泵压力上下波动有4MPa,用10%甲醇水做流动相时压 电煤属于哪个煤种? 欲除去氯化钠固体中混有的少量硝酸钾固体,所进行的实验操作依次是( )蒸发 结晶() 欲除去氯化钠溶液中混有的硫酸钠,依次加入的溶液为( ) A由B转化而来,B在沸水中生成C,C在空气中氧化成D,D是有臭鸡蛋味的.请问ABCD各是什么物质? 电煤属于什么煤? 和消石灰.草木灰等碱性物质混合使用,会降低肥效的是:A.碳酸钾 b.硫酸铵 c.尿素 d.磷酸二氢钙 在80克SO2和O2的混合气体中,经分析知经分析得知硫元素的质量分数为40%,求此混合物中氧气所占的质量分数? ABCD四种含CL单质或化合物,A能生成C A能生成D AB能生成 B能生成D D能生成C(DC条件光照),请问ABCD是什么 酸雨对下列物质腐蚀作用最小的是A汉白玉石雕B铜质雕塑C铝合金门窗D水泥制品 二氧化硫中硫元素的质量分数为多少?用S%=S/SO2*100% 这个公式算 单质 氧化物 化合物之间的逻辑关系 为什么含氨根的氮肥不能和熟石灰、草木灰等碱性物质混合啊? 已知NO2和SO2的混合物,N元素的质量分数为28%,则混合气体中硫元素的质量分数为()A 4% B 33% C 40% D 66% 会的 ABCD分别代表一种物质,AB为化合物,CD为单质,D是空气中的重要部分,AB的化学方程式? 凡是含有 按根离子 的氮肥在使用时不能与熟石灰、草木灰等碱性物质混合物,其原因是A.混合后生成不溶性物质,降低肥效B.混合后氮肥要潮解C.混合物会增加土壤酸性D.混合后会放出氨 硝酸铁与碘化氢的反应两者量不同离子方程式怎么写 溶解中的吸热何放热是怎样判断的 A由B转化而来,B在沸水中生成C,C在空气中氧化成D,D有臭鸡蛋的味道,请问:ABCD是什么 铁和碘化氢反应方程式. 燕子几月往南飞,请问是几月呢 A和B可以相互转化,B在沸水中生成C,C在空气中可以氧化成D,D有臭鸡蛋气味、问ABCD各是什么?不要鸡生鸡蛋熟鸡蛋臭鸡蛋.要正经的! 氯气与碘化氢是放热还是吸热 燕子为啥要往南飞虽然悬赏分不多,但希望大家能够参与 每秒燃烧10Kg煤,煤中硫元素质量分数1%,假设全转化为SO2,计算每天产生的SO2物质的量是多少? 碘化氢和氯气的化学反应模型 为什么燕子往南飞 A和B可以互相转化,B在沸水可以生成C,C在空气中可以氧化成D,D有臭鸡蛋味道?请问ABCD各为什么物质?我查了有臭鸡蛋味道的通常指的是H2S, 为什么弱电解质如醋酸的物质的量浓度(C)等于c(醋酸根)和c(醋酸分子)的和而不包含c(氢离子)?/ 除去NaNO3固体中混有的少量KNO3固体,所进行的实验操作依次为:溶解,蒸发,结晶,过滤.(这道题的答案我看不懂) 既然都已经析出晶体了,还过滤什么东西?那杂质是哪一步去掉的? 一般哪里有炼铁炼钢用的喷吹煤 离心泵水泵进水管充满度、流速;出水管充满度、流速一般取多少?离心泵流量6m3/h,扬程36m. 建筑物中的哪些金属受酸雨的破坏较小?为什么? 好吧! A和B 可以互相转换,B在沸水中生成C,C与空气反应生成D D有臭鸡蛋气味,问 ABCD分别是什么? 液压传动中管径突然变小,流速与压力如何变化
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘