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

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

新浪微博商业化:大树底下真的好乘凉吗? 亲爱的GitHub,我们怎么访问不了你? 经典神作《魂斗罗》iOS版今日上线 专访最强夫妻店:“神庙逃亡2”开发背后的故事 我们做错了什么?3周了,一毛钱也没赚到! 开源产品系列:简单强大的模板语言JSON Template 十年历史的KDE bug修复 为什么函数式编程在Java中很危险? Android平台获X11协议支持,手机变身绘图板 Rackspace通过OpenStack和定制OCP服务器节省40%成本 美国人是如何利用大数据的应用来防止流感的蔓延 W3C北航总部成立:招兵买马增强中国标准声音 Mozilla推出开发者预览版Firefox OS智能手机 强强联合?传微软投30亿参与Dell私有化 微软发布Windows Phone 7.8 SDK更新 Amazon账号将支持内付费 道具可登畅销榜 裸照门:500px应用被苹果踢出App Store APP的魔法:三个杭州小伙做手游吸金千万 Facebook与Google,巨人们将在移动端决胜负 移动广告量起来了!2013年绩效营销将成主流 Fedora欲以MariaDB取代MySQL 将节能进行到底:Facebook为冷存储寻求廉价闪存 谷歌Q4财报净利润28.86亿美元 超分析师预期 社交媒体的力量:Wood Camera登上iOS付费榜首之谜 屏蔽GitHub是互联网时代的“闭关锁国”吗? 巧妙利用空白设计案例分享(多图) 用友发布2013/新三年业务策略 力推UAP/CSP云平台 AWS集群计算新增内存分析EC2实例 手游:鼓足力气,掰弯传统3D游戏大作 LBA兴起:未来移动广告将基于地理位置 苹果发布2013财年Q1财报:iPhone销量及营收低于预期 SoS!俺用fireworks做了一套菜单,但是应用于框架结构中时,只显示菜单所在框架的部分菜单。也就是说菜单显示不完整,如何能够让菜单跨越 刚装了REDHAT 7.2,不知道网络怎么设置 报表打印,望各位指点..... 是不是我这里设错了? 菜鸟有问题,Win2k的定时关机程序 关于天数累加的问题 webbrowser控件问题? 421连续进纸标准,打印问题,难啊,难 有个小问题难住偶了! 请教 bdf 文件的格式 在JPrint中如何设置页面的打印范围(不使用打印机的默认打印范围),找不到例子,那位能够给个实例。。。 开发jsp需要什么环境和安装软件,目前版本为多少? 在PASCAL语言中的"集合"概念,如何转化成C语言表示 怎么回事。formshow 不能写太多sql语句么〉?,怎么不显示?大家快帮看看,急死了 自动累加的问题?(100)我只能给这么多了 哪里可以下载powerbuilder7.0 网页自动累加的问题(100) help 求肋!! 有关SUN WORKSTATION OPENBOOT的问题 请问一下vb6和.NET 请问,如何用flash 做一个网页“访问量统计”计数器? 请问在win98繁体下开发的pb源程序,在简体win98下怎样转过来?急,请帮忙! 手提电脑,没有软驱,现有一外置USB软驱,但是找不到光盘驱动, 谁有用vb开发组件的详细文档资料或教程 关闭窗口的问题!! 欢迎有志向的VB程序员加入到我的团队!!! 大家做Web Service的时候,是使用SqlDataAdapter这类控件 ,还是自己写SQL语句访问,还是自己写数据访问中间件(e.g:dll),那个在生产环境 webbrowser问题 hello 请问我的servlet程序应该放在哪里?我使用tomcat 欢迎有志向的VB程序员加入到我的团队!!! 有没有当网管的兄弟啊,交流一下 在IE设置为缺省的情况下,怎么用ActiveX? 急!急!100分问题求解(不够可加)输入中文到oracle数据库乱码的问题 请教一个小问题:通常自己定义的ID在那里定义好?也放在Resource.h里面吗? pascal求问 请问有谁知道哪里有水晶报表的中文教材? 这个问题我很头疼,大家能否帮帮忙? pascal 哪位大虾告诉我哪里可以下载bc3.1的编译器 怎么样在mts object代码中使用计时器?类似TTimer.onTime哪样 请问如何在对话框中,设定单选的默认值? 在PASCAL语言中的"集合"概念,如何转化成C语言表示 探讨数据库设计的最实际的原则!高手新手都请进!! ActiveSkin 的问题,知道的人来捡分啊!:) VB可以写COM? 高分求教:怎样用DX Show将获得压缩卡的压缩流? 如何用VB来做聊天室刷屏软件 请高手指点图片显示问题!!! 在access数据库中用insert插入记录时如何处理“自动增长”字段? 这个问题我很头疼,大家能否帮帮忙? 哺乳动物有多少种? 连接圆上任意两点的线段中,最长的是直径对还是错原因 现在陆地上最大的动物是什么? 进化世界哺乳动物怎么弄? 1张A4纸是多大面积 饲养场养了80只羊,其中山羊是绵羊的4倍,山羊和绵羊各有多少只 为什么自行车在行驶过程中受到的是静摩擦力?车轮子明明在动啊? 两端都在圆上的线段,直径最长是对是错两端都在圆上的线段,直径最长是对是急用 农村养山羊还是养绵羊好农村养绵羊和山羊哪个赚钱?哪个好养?网上都说山羊赚钱,好养,但有养的邻居说山羊跑起来追不上?他们晚上爱叫吗?是秋后才能买羊吗 某农场有绵羊490只,山羊只数是绵羊的7分之4.山羊有多少只?(写出数量关系式,再用方程计算) 一包A4纸共100张,售价18元,照这样计算,每张A4纸合多少元钱?还有:如果1千克小麦可以磨面粉0.85千克,那么100千克、1000千克小麦可以磨面粉多少千克? 山羊和绵羊比哪个好养 某农场有绵羊490只,山羊只数是绵羊的7分之4.山羊有多少只?(写出数量关系式,再用方程计算) 急 物理25页,汽车不在拱形桥的最高点或凹形桥的最低点时能不能用上诉方法求解.25页,汽车不在拱形桥的最高点或凹形桥的最低点时能不能用上诉方法求解.物理书第25页上的 ,汽车过桥,在桥中间 自行车后轮与地面没有相对运动,只有相对运动趋势?请不要偏题 世界上共有多少种水生哺乳动物 有一群羊,既有山羊又有绵羊,其中山羊占45%,再加入32只绵羊后,山羊就只占25%, 养山羊好还是绵羊好? 苹果的三分之二与利的五分之四正好相等,梨25千克,苹果多少千克 小尾寒羊是山羊还是绵羊?养山羊赚钱还是绵羊赚钱? 为什么当自行车启动,在链条驱动下,后轮逆时针转动,轮胎与地面接触处相对于地面有向后运动的趋势求高手详解啊!最好有图 毕业很久了,帮人做题,发现全忘啦.载人舱在将要着陆之前,由于空气阻力作用有一段匀速下落过程.若空气阻力与速度的平方成正比,比例系数为k,载人舱的质量为m,则此过程中载人舱速度应为? 怎么分析小车过拱形桥 现在山羊好养还是绵羊好养 利用频闪照相法可以测量物体间的动摩擦因数.在暗室中,有一正方体小物块在倾角为θ的固定斜面上做初速度为零的匀加速直线运动.若在释放小物块的同时打开照相机的快门利用闪光灯将它 汽车不在拱形桥的最低点和最高点的运动怎样分析?请具体的解释为什么最高点不考虑牵引力? 陆地上奔跑速度最快的动物是什么? 一张A4纸面积多少 高EQ是什么意思 各种动物的奔跑速度 买2千克苹果5千克梨比买6千克苹果5千克梨少支付12.4元,买1千克苹果多少元 动物之最:最长寿的哺乳动物? 情商太低是什么意思. 一张A4纸加一个信封大约多重?寄一封省内平信 不知道贴几元邮票 就一张A4大小的纸和信封 最长寿的哺乳动物是?如题 喜羊羊究竟是山羊还是绵羊?为什么有的外文翻译是Pleasent Goat?山羊和绵羊有什么区别? 两张明信片加一个信封有多重?准备给国外的朋友寄明信片,邮局说一张的邮资是4.5,一封20g以内的信件是6块钱,所以想一个信封装两张明信片.但是不晓得会不会超重.明信片是同学定制的,信封 1.最长寿的哺乳动物是什么?2.最聪明的哺乳动物是什么?3.跑得最快的动物是什么?4.飞得最快的动物是?5.世界上最长的昆虫是什么?6..世界上最小的鱼是什么? 属羊是山羊还是绵羊 一张照片加两张信纸加一个航空信封有多重还有一张邮票 请问哺乳动物中最长寿的动物是谁 一辆汽车通过拱桥顶端速度10m/s,车对桥压力是车重力的3/4,要使汽车通过顶点对桥面没有压力,车速至少为?怎么出来的? 信封一般什么纸 如何测量一张a4纸的体积 汽车过凹桥质量为m的汽车在凹桥上以速度v前进,桥面的圆弧半径为 r,重力加速度为g.求:汽车通过桥的最低点时对桥面的压力F.并讨论若速度增大会发生什么情况? 信封用什么纸 一张A4的纸怎样叠体积最大用来装水的 克隆羊“多利”是哪只羊的名字?是被克隆的那一只羊还是克隆出来的那只羊? 世界上有哪几种哺乳动物 谁知道在陆地上生活的哺乳动物最大的,最小的最低的与最高的各是什么?```急用```~陆地上生活的哺乳动物,那个最大```那个最小```那个最低`那个最高?`````````急用亚`````各位帮帮我``````! 山羊160只,绵羊比山羊多40只,山羊比绵羊少( )%,绵羊比山羊多( )% 山羊的只数比绵阳的7倍多12只,山羊比绵阳多120只,求山羊和绵羊各多少只 陆地哺乳动物介绍是特征 属于哺乳类的动物有哪些?10个以上! 自行车匀速前进时所受摩擦力是静摩擦力,这是为何? 直径是圆里最长的线段.对不对 哺乳类动物有哪些?急用! 世界上一共有多少种哺乳动物 一包A4纸多少钱?有几张? 一个判断题 圆上两点之间最长的线段一定是直径
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘