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

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

Mozilla正式发布Firefox 23 新增混合内容拦截 网络监控功能 14条建议,使你的IT职业生涯更上一层楼 依托微信的电商产品实践——SDCC 2013讲师潘凡专访 IBM将向Google、英伟达等授权Power架构技术 人脑研究将推动下一代网络革命?从大爆炸到大收缩 H3C携手F5将“空转”数据中心变为“分布式数据中心” W3C小组发布Web存储API推荐标准 开发者必备的6款源码搜索引擎 闪亮登场:开发者制作图形图表所需的11款JS工具包 来自两位技术大牛的博弈:HBase或将制霸NoSQL? 应用改变世界 2013英特尔®创新应用大赛火热开启 看13位CEO、创始人和高管如何提高工作效率 对首次购买智能手机用户而言,苹果吸引力并不大 Amazon Appstore面向Web应用开放 开发者可添加应用内付费功能 CSC收购成功转型的大数据初创公司InfoChimps 嘀嘀打车发展报告:成全球最大出租车调度平台 又摊上事儿了,Android的MasterKey再次出现bug 比特币挖矿必备工具 硬件性能大比拼 RDBMS vs. NoSQL:反派为什么会得以存活并发展壮大 帮助优化移动网站:谷歌发布新指南和PageSpeed Insights工具 增强Web可用性,你需要避免的七大设计错误 Python六大开源框架对比:Web2py略胜一筹 海外看中国:老外开发者间流传着的7件事儿 京东云峰:电商移动云平台背后的技术 初创公司DigitalOcean:55秒搭建一个云服务器 分布式系统事务原子性的非阻塞实现 IBM发布基于人脑特性设计的全新计算架构和编程语言 16款加速编码的HTML5在线工具 JFrog:开源项目的最大挑战是文档和许可 5个技巧打造完美用户体验,不到两年完成用户万到千万的增长 CDN未来的机遇和挑战 给分啊 今日郁闷之至……散分! 来来来,大伙们一起来衷心祝愿xxmm (晓箫)的老爸老妈顺利赴美参加晓箫的毕业典礼!! Dev-Cpp 使用 NetAPI32.lib 的问题 急寻严蔚敏,吴伟民版《数据结构习题集》c语言版的答案,请问哪有啊 高手们给我一个超级简单的HOOK API的例子好吗?求你们了。 错在哪里 好郁闷啊~ 谁有站内关键字模糊查询的代码?紧急求救、在线等待!!!! 字符串转化为数组的问题 讨论<<标准C++库大全>> 上次是哪位兄弟要的《新编API参考大全》CHM版呀?我找到了一个,还行。 欢迎大家访问我公司的网站! 请学c++builder 有份量的人推荐一本经典的教材(适合初学者) 欢迎大家访问我们公司的网址! 关于分页的问题 请帮我看看这个小程序 欢迎大家访问我公司的网站! 已知一个文件夹的路径,如何得到该文件夹中的文件的名字? 关于StreamReader的问题 欢迎大家访问我公司的网站! 有关编辑框的问题 各位大侠一个很菜的问题,来帮帮忙! 关于集合的一个小问题 最菜的问题,100分白送!!! 很基础问题,脑子不清楚,大家帮忙看看 紧急问题! 终于 知道MESSENGER 只是 WIN2K 的服务了! 那么 这 个怎么办?? 请问以下我如何实现一个带滚动条的子窗口 问一下,resin和iis集成后class文件放在什么目录下 用 http://www.rc80.com (c# + sqlserver2000) 只想换一个.net 的完整的分页代码! 一个Corba客户端连接的问题! 如何在resin中设置wap服务器功能 大家帮忙!! 什么时候用DataGrid,什么时候用DataList? 怎么样从数据库里取得某字段的值??? 昆腾的硬盘修理找谁啊?急,UP有分........ www.webmatrixhosting.net免费空间中FTP文件上传问题 Apache 2.0.43 +Tomcat 4.1.24+mod_jk2-2.0.43.dll整合问题出现:The servlet container is temporary unavailable or being upgraded 我装的Delphi7好像丢了一个文件:Proxies.pas,哪位好心人给我一个? 人,真脆弱! 开水房追女之呕心沥血计划 (超暴笑) 孤独 急!!Image对象如何设置成为透明的???Thanks! 【憋的慌】大头、阳光呢!!! 关于FLASHMX的遮罩问题 一个问题,想不通! 【憋的慌】死水、一辉呢!!! 急!!!急!!!怎么在建表时使用一个时间函数??就是指出加这条这条文件的时间?? 【憋的慌】蓝心、风呢!!! 怎么获得一个应用程序的图标,比如我用进程ID,获得其主模块,然后怎么办! Happy is the man who living by his hobby 中华鲟是什么类保护动物?看准“类” LED芯片包不包含衬底书上写的不明不白的 写的是衬底在芯片里 图里面却画在外面…… Happy is the man who is living by his hobby.happy是形容词,形容词怎么能做主语的? 中华鲟和白鳍豚是同一类动物吗? 三字经的全部内容 glue怎么读 A man cannot really be happy if _he enjoys doing is ignored by society as of no value .A.what B.when C.that D.all what 为什么,求详解 Vanilla是什么意思? 英语翻译 first name vanilla custard是什么意思 pudding的音标是? “厨师”用英语怎么说?还要有音标英语 法语都行 I think English is ( ) than the other subjects,and I do ( )in it of allA more interesting;bestB much more interesting;well选哪个, 请问pen presure 在哪里啊 我用的中文版c4d 我也是 ps有压感 但是 c4d没有 怎么调啊 .In that hotel,the bread and butter____served for breakfast ---the girl was too selfish and never thought of others,she wasn't getting on well with others.A thought B unless C since D until 2013年热门关键词有哪些 ①当v增大时,所需向心力增大,即万有引力不足以提供向心力,卫星将做离心运动,脱离原来的圆轨道,轨道半径变大,但卫星一旦进入新的轨道运行,其运行速度要减小,但重力势能、机械能均增加 pen的意思 2013年热门职业2013什么职业好呢? 离心运动,为啥万有引力小于向心力 She was a girl who knew how to be happy even when she was sad 的中文翻译 求2013年的热点话题.热点! 根据黄金代换式我们知道重力=万有引力(忽略向心力),为什么还会有物体作离心运动?不是已经忽视向心力了 激光有哪些之最如:最快的“刀”,最准的“尺”,最大的“书” glue的中文 英语改错 A man cannot be really happy if that he enioys doing is ignored by society as of no value or importance 梯形ABCD中,AD∥BC∥EF,EF交AB、DC于E、F,交AC、BD于N、M,且M、N三等分EF,AD=2,BC=5,求EF的长如果有人能够在今天下午前回答正确的话,额外加高分. 以“我和我的祖国—喜迎国庆60周年”为题写征文征文主题“我和我的祖国—喜迎国庆60周年”以歌颂祖国和党,赞美社会和家乡发展变化(我是晋城的),表现人性真善美等为主要内容. Green,Jim,am,i,to,nice,meet,you连成句 life insurance policy go to something啥意思I also have a $10,000 life insurance policy that will go to the rabbits.前文说某人养了100多只兔子,导致生活入不敷出.然后说出这句话. 请问parfix glue 是什么意思?谢谢~~ 厨房门玻璃坏了怎么办 为寻找清洁能源用激光创造微型太阳 祖国60周年国庆作文最好带这60年来的进步脚步450字左右.好的追加20 to the best of our knowledge是什么意思 激光以什么为能源 glue的中文意思 中华鲟什么类动物A鱼类B两栖类 激光是啥? glue是什么意思? 中华鲟属于国家几级保护动物? 有一道题是这样的:已知m和n互为相反数,p和q互为倒数,a的绝对值是2,求m+n除以2007a 一只船顺水行320千米需用8小时,水流速度为每小时15千米,这只船逆水行这段路程需用几小时?320÷8-15 =25(千米) 25-15=10(千米)320÷10=32(小时) 这是答案它为什么减去一个15后又减一 用pen和not造句还要中文意思 安全帽承受压力好的性能是利用了什么原理 水流速度是每小时十五千米,现在有船顺水而行,八小时行320千米,若逆水行320千米需几小时?不用方程解. 张大伯家养了一些鸭和兔,鸭和兔一共有12个头,30只脚.张大伯家养了多少只鸭多少只兔? 半个乒乓球比一个完整的乒乓球承受的压力大对吗 水流速度是15km/时,现在有船顺水而行,8小时行了320千米,如果逆水行了320千米需要及时? 张大伯养了一些鸭和兔,鸭和兔一共有12个头,30只脚.张大伯养了多少只鸭,多少只兔?快哦.急. 2、安全帽之所以承受压力好,是因为它利用( )的原理. 某船在静水中的速度为x千米每小时,若水流的速度为y千米每小时,船逆水行了a小时,共行了 千米,这段路程某船在静水中的速度为x千米每小时,若水流的速度为y千米每小时,该船逆水行了a小时, PROTESTERS:"This is what democracy looks like!" MAHLON MITCHELL:"This is ground zero for the nati请问这两句话怎么翻译 三个乒乓球盖能承受1吨的压力吗 chickens in the 中华鲟为什么是一级保护动物 LED衬底分哪几种目前市面上主流的衬底分为三种,分别是蓝宝石,硅,碳化硅,据我了解,有些不是这种衬底,在此提问,以上三种是否只针对于长GAN,若长其它的,如发红光,会采用哪种衬底 法国央行行长:金融交易税构成巨大风险印度拟射火星探测器 欲争亚洲第一被批马来西亚副首相为选举造势 出席者可获法国数百活动人员斗牛场前集结 抗议斗阿根廷执政联盟赢得议会中期选举数据显示中国赴美名校留学生每4人就有印度连环爆炸案已致6人死亡 反对党指因监听事件遭指责 德情报部门计划加强智能手机横行 日本偷拍案件五年翻一番伊朗将举行系列会谈 为新一轮核问题谈韩国自主研发太空观测卫星抵俄基地 拟500万叙利亚人在国内成难民 冲突严陕西“房姐”龚爱爱案10月31日二审买机票就送高铁票 两岸廉价航线延揽长男子半夜裸身从奉化游泳到鄞州 吸毒重庆一校从不请家长 学生犯错到小房间3岁男童被老师刀划手背 留下心理阴影李某某等5人强奸上诉案将于10月31各大电视台开启亲子模式 网友:别折腾安徽一高校电子阅览室成网吧 学生缴费中学生晚上爬墙出校出意外 1人背上留德国7∶1狂胜巴西 爱家168送出惊老胃病患者来电领取惊雷之后 格外安静……“老男孩”登上大银幕热身赛 “副班长”逆转“班长”10万人“微观” 全城关注#2014喜临门新品惊艳成都家具展1∶7 哭巴刘适兰:回乡参赛感觉好6月成都CPI同比上涨2.1%老街故事13日 免费看《老哨卡》中国龙桥家居博览城亮相家具展成都居民赴台团队游签注免检旅游组团社超越部门利益 推进整体工作楼市播报把反腐倡廉融入各项工作成都首家防震减灾示范学校启用地震预警贫瘠乡镇 变身“大学城”的秘密四七九郊县班录取分数公布成都因抗战错失世博会
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘