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

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

前端开发工程师如何在2013年里提升自己 Java受Objective-C影响很大 而不是C++ Instagram回击报告指责:用户仍保持增长态势 回顾:2012年科技行业十大败笔 苹果地图入选 Amazon CEO Jeff Bezos:好年景,大挑战 2012年度盘点:移动互联网大事件回顾 详解Amazon Redshift 移动周报:再见,2012!你好,2013! 英特尔或在2月宣布其电视计划:提供分类频道 Prismatic:用机器学习分析用户兴趣只需10秒钟 谷歌布局亚太地区数据中心建设 服务响应速度有望提升30% 2013年移动互联网行业技术趋势前瞻 老骥伏枥志在千里:回顾微软这一年 2013或将崛起 水落石出:在与谷歌苹果竞购创业公司中微软胜出 用扁平化的界面设计吸引用户 2012年12月份全球主流浏览器市场份额排行榜 冲榜不一定要刷榜:增加游戏曝光度的7大杀手锏 科技vs政治:FTC对Google的反垄断调查结束背后 威胁百度:奇虎360确认将与谷歌达成合作关系 Facebook更新Messenger应用 推免费网络电话服务 网上疯传iOS7概念设计:Dashboard是真是假? 过时的UI设计 Ubuntu手机系统前途不被看好 三星将于今年发布Tizen设备 将对苹果形成威胁? 分享9条经典的编程语录 国际著名黑客大赛介绍与比较 微软Azure CDN服务全球范围内出现宕机 双向多功能U盘:从Android设备到PC还有多远? 证明了自己:微软Win8获美国防部6.17亿订单 2013 Facebook黑客杯报名即将开始 解决Win8下IE10无法打开的故障 [简讯] Scala 2.10.0发布! 在VB中怎样压缩磁盘中的文件或文件夹 如何在平面上实现三维坐标的模拟?(在线急等) 请问各位高手《Delphi 6程序设计从入门到精通》里的例子代码谁有? 在平面坐标里如何实现三维坐标的模拟定位(在线急等) 怎样实现这个简单的功能? “将事件写入日志”选项不能改动了?奇怪 如何在平面上实现三维坐标的模拟?(在线急等) 如何比较两个字符串 NCNE--国家网络技术水平考试介绍 在问个简单的问题:Delphi中引号的问题 怎样知道windows的应用程序的路经 哪位高手给俺讲讲with xx as xx do 的用法,谢谢! 很菜的问题 请前辈进,请高手进!!! 那位仁兄有JAVA开发的五子棋游戏,我用一套软件交换 怎样用com技术C/S三层做中间件和使用,谈一点原理和实例。 高手请进 100分!!!!!!!!!!! NCNE 国家网络技术水平考试 介绍 软键盘的问题?UP有分 关于装配件的问题 想购买一套人事管理系统的源代码!!!!!!!!!!!!!!!!!!!!!!! 对话框中标题栏上面的颜色如何改? 对服务器来说,内存更重要还是运算更重要? 关于jdk与windows xp 我举报:信息产业部的领导根本没有学习好“三个代表” 聘驱动开发人员!!! 本人在运行REALPLAY8.0的时候出现了这样的错误窗口. 普通常量与符号常量有何区别,怎样使用? 怯怯地问: 问题一:我的网页是用表格分的区域,把表格线设为0 ,但加了背景后 ,背景上总是有一小条白线 ,那是表格的边框线 , 问怎么办? 这个不是太难,但很不简单! 报错---[Linker Fatal Error]Fatal:Expected a file name:,什么原因?大虾指教,在线等待 远程调用时传输数据的问题! 2000 不能正常关机 初当网管,请教大家都用什么工具? IIs重新启动一个web服务出现死机,怎么回事? 问题二 :我做了个POP窗口 ,我想在POP窗口打开时是固定大小的 ,不能调整, 该怎么弄? 希望有一个网络安全的开发专版 关于中国万网的域名解析问题。急救! IIs重新启动一个web服务出现死机,怎么回事? 系统提示有错啊! 请教各位高手,本人在运行REALPLAY8.0时出现以下错误提示! 用javascript如何判断textbox中的串是否是汉字及其个数? 用DELPHI的都是一些比较菜的程序员的工具!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 数据更新的问题 QueryString 多参数如何分隔?? 《C++ Primer》和《C++ Language Programming》有类似吗?是否都买来看? 请哪位大虾谈谈计算机语言语言与数学的关系。 “金环天朗通信技术发展有限公司公司”怎么样?请知道的兄弟姐妹介绍一下。 请教高手:一个很菜的问题 谁有usb开发相关资料??? 骑车男子银行门口抢3万元 被众人当场浦江男子发现幼儿园附近加工厂排难闻气男子拖欠员工工伤赔偿六万元 儿子替父警嫂送聋哑男孩回家 用纸笔沟通写下五小伙称银行卡被盗刷损失160多万状告金华男子塑性支气管炎 咳出的痰像一棵薛蛮子案涉案女称 薛有特殊性癖好且常姑娘深夜金华街头迷路 搭顺风车被摸腿18岁男孩因不肯洗碗被数落 很生气跑鄞州男子有车有房 管不住手脚去偷窃杭州公交史上寿命最短线路:火车东站小宁波实施第二轮人工增雨 风雨雷电冰雹杭州小区植物因连续高温天气多被晒焦浙江公布正风肃纪监督电话重点盯酒局牌6岁女孩不满父母打骂留下书信离家出走挪威总理装的哥开车 将被纳入竞选连任女子凌晨在客房内犯下命案货车司机天热迷糊挂错档位 开车撞进早杭州周边再次人工降雨 继续遭受副热带杭州水电供应仍旧紧张 严控高耗能企业杭州医院急诊多因高温诱发 出汗太多易尹中立:一场300年前的国家级牛市李克强:重点推进住房消费等6大领域消创维与东芝品牌战略合作成业界新范式诺奖得主科斯留给中国的十大忠告最MAN的啤酒广告——Guinnes天华阳光与哈德森清洁能源投资基金建立烟草税时隔六年再上调烟价上涨10%,360手机助手3.0版 开启“社交慧眼识号,能发现几个就看你的本事了!【浪琴/官方活动价688元】回馈粉丝80后如何帮父母理财?胡佑嘉:9月25日金银回光返照,原油成俄胜利日主宾国背后:中俄敲定西线输徐才厚到底得了什么病母亲节这天读此文,才发现自己也是个熊那些能充电、改变人生的微信号牙齿护理全解析,给孩子一口漂亮的牙齿徐翔密会公募大佬,说了啥悄悄话?现在股市里人人都在赚钱!到底谁在亏钱选对真碧玺很重要!绝不请到人造宝石!12套房子才够养老?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘