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

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

画布的圆拷贝和直线拷贝-Delphi资料 回车替Tab下移控件-Delphi资料 获取系统颜色-Delphi资料 渐变色窗口背景-Delphi资料 控件深度投影和阴影效果的实现-Delphi资料 控制Delphi的窗口显示位置 控制Form不能放大、缩小、移动、关闭-Delphi资料 控制系统菜单-Delphi资料 利用Delphi实现支持窗体的自定义函数 轻轻松松在DELPHI3.0中实现三态按钮 全部窗体可使用鼠标移动-Delphi资料 让按钮连续工作--兼谈Delphi元件开发 让彩色光标出现在Delphi程序中 让彩色光标出现在程序中-Delphi资料 在Windows桌面的任务栏上有一个凹陷的区域,其中显示着系统时钟以及一些图标,这个长方形的区域便 如何使用Show方法来显示一个模态窗口-Delphi资料 如何旋转字体-Delphi资料 如何隐藏和显示Windows的任务条-Delphi资料 如何在DELPHI界面上运行可执行文件 设计Form时的快捷键-Delphi资料 生成非矩形窗口-Delphi资料 时隐时现的鼠标-Delphi资料 无标题窗口的移动-Delphi资料 应用程序敏感键的实现-Delphi资料 用Delphi 4.0 设 计 新 型 界 面 用Delphi 实 现 自定 义 颜 色 对 话 框 及 其 构 件 用Delphi 实现自定义颜色对话框及其构件 用Delphi4实现风Word97风格的工具栏 用Delphi 开 发windows 屏 幕 保 护 预 览 程 序 用Delphi设置墙纸 用DELPHI实现无边界窗体的移动 急!请问如何在程序启动时自动检测MODEM?能给出CODE最好。 如何在unix上远程安装软件 KeyPress事件处理疑问 TComboBox能不能有OnMouseDown事件??? 请教哪里有付费便宜、性能稳定、访问速度快的支持ACCESS、ASP的空间? 加载不了*.ocx控件是怎么回事? 我的CStatic上为什么不能贴位图? 主页何为佳? 偶用ultradev,在table里绑定字段,并作了重复区域的设置,但是live data 的结果总是一列纪录出现在一个单元格里,而且只有第一个单元格里有数据,其他是空的,怎么回事?//牛虻 ClassView Information file如何恢复,急,知道的朋友望告之! 500分求一好用的代理服务器,能访问www.creaders.net这样的网站(按:贴太多结不了,无法在水园发贴,烦版主转到水园) 各位高手,我的分发光了,问题还没解决。帮帮我好吗 请问什么叫专家分..怎样得到专家分,你们的专家分都有多少...有超过1000的吗 -->> sql语句中求和问题. 急急急急!!!,请教一个VB中SQL语言的问题!!! 请教关于数据代入的问题 我们公司把qq给封了,好着急啊,谁知道有什么办法?送分啊~~` 俺要怎么办? 怎样得到DBGrid 中某一单元格的Focus,因为我要处理这样的问题,在DBGrid中输入的数据如果不正确,则focus不能离开此单元格。 VB中的Byte型数据在PB中是什么类型? 动了枪的青马 在sco unix 5.05的分区问题 help! where could I download NT serve pack 6.0 那位高手知道在solaris编程中,如何在按钮上加载图片? 我怎样发布自己的servlet 怎样确定对象类图的中类? 可以帮我解决一个关于linux的问题吗? 熟悉文件操作的高手请进来坐一下。 +++++++关于MS SQL SERVER2000的注册服务器问题+++++ 考过scjp的进去看一眼 请问DTD是不是将要为XML Schema所代替???现在主要哪一个呢? XiaoFang(奇奇) 你在哪里,十分感谢,再送100分! 关于输入框中输入空字符串的判断 zork(我是一条鱼……) 说明白些呀,用http代理怎么上qq? HK的书店 求教:关于CRC校验的问题 问题:有关查询结果排序. 为什么我用的是LoadString函数而编译显示错误时显示LoadStringW函数。两个有什么区别? 请问这个错误提示是什么意思呢?谢谢! OCI中的类型转换 麻烦大家看看下面的代码对吗?能否用MSChart显示MSHFlexGrid中指定的行(上下)和列(左右),谢谢谢谢 如何用vector做一个二维数组。如int a[4][4]的。该怎么做 仰天长笑,号称CSDN(“中国”软件开发网),却。。。 鼠标移出当前窗口时显示MessageBox如何做? 操作系统为solaris如何配置才能上internet网? 大虾留步! 根据日期查询数据库的问题(当天结账)急! 请问怎么去打开一个SQL SERVER的数据库,求救 怎样修改注册表? 如何把程序编译为只有一个EXE的文件?(对不起,我的分发光了!) 不等式{mx方+2(m+1)+9m+4}分之{x方-8x+20}<0的解集为R,求实数m的取值范围 完全中和某一强酸溶液,需用10克溶质质量分数为5.6%的KOH溶液.如果改用10克溶质质量分数为5.6%的NaOH溶液,反应后溶液的PH A大于7 B小于7 C等于7 D无法判断要有解析,解析,解析,答案说了没用 解-2≤4m^2-9m+4≤2m的取值范围 若不等式(x^2-8x+20)/(mx^2+2(m+1)x+9m+4)>0对一切x属于R,求实数m的取值范围? 2.9152保留两位小数 这个不等式怎么解 -6 0.01356356.它的循环节是356,可以怎么简写 2.045保留一位小数不记得怎么算了..0.615502化为百分数(保留一位小数) 怎么鉴别食物中是否含有地沟油. 0.01258258···是()小数,可简写成(),保留三位小数是(). 2.487保留一位小数得多少? 怎么容易鉴别食物中是否含有地沟油? 0.45353.可简写成( ),它的循环节是( ),它是( )循环小数. 不等式mx2+2(m+1)x+9m+4 如何识别有地沟油的食物? “这是一本新书”请指出主谓宾 英语的主谓宾和汉语的主谓宾有什么区别吗? 已经买回家的食物咋么鉴别是不是地沟油做的 学习了小数的性质后,一般都要把小数简写,但是像3角=( )元,是写0.3元呢还是0.30元 如何辨别语文的:主谓宾丁壮补 三年级语文问题? 1、写3句有关自信和成功的名言警句. 啥叫主啥叫谓啥叫宾...俺农村来滴..搞不懂>_那能不能稍微多据点例子..这个我也知道.0.0 主谓宾定状补分别由什么构成 语文作业本上该写什么名言 关于语文的主谓宾.怎么理解语文里的主谓宾.文言文里的. 怎样辨别用地沟油炒过的菜 求各位帮下忙,语文填写恰当的名句,1.全班同学一起把教室打扫得干干净净,这真是“ ”.2.“ ,“ .”经过长期的交往,我终于理解了他的为人.3.古人常说:“ ,.”说明书与实践是离不开的.4.爸 语文的主谓宾中 主语前面是什么语 还有谓语和宾语呢?主语前好像是定语什么的请认真回答 一个两位小数保留一位后是2.4,这个两位数最大是多少,最小是多少 语文名句默写 语文主谓宾划段开展这项活动,要做好激发鼓动工作.注:符号主语下划双横线,谓语下划单横线,宾语下滑波浪线,补语打,定语打(), 一个两位小数保留一位小数后的7.4,这两位小数最大是多少,最小是多少 面粉厂2/5小时可以磨面粉7/10吨,照这样计算,3/4小时可以磨面粉多少吨? 主谓宾划分Is this shirt Tim's?我是初学者,这句话的句子成分怎么划啊?下面的这么说跟上面的意思一样吗?Is this Tim's shirt? 初三科学试题1.近年来时兴一种“蹦极跳”游乐项目,即脚部用弹性绳系着,然后头朝下从高空(高架或高的桥梁等)跳下,感受人体从高空自由坠落的刺激.(注意,此项活动只能在国家批准的场所进 初三科学题,高手进某同学为了向同班同学证明“声音在空气中传播时,是依靠空气的振动来实现的”这一结论,设计了以下4个实验,哪个最合理?(答案B,我认为是D)A.在长的钢管一端敲一下,在 根号10的整数部分是a,则小数部分为? .如图所示,与传送带等高的光滑水平台上有一小物块以某一初速度滑上传送带.若传送带静止时,物块离开传送带后落在地上P点,若传送带顺时针匀速转动时,则物块将落在A.P点 B.P点或P点的 科学题.在盛有盐酸的试管中滴入几滴硝酸银溶液,会看到什么景象?然后再往试管中滴入几滴硝酸,震荡后,发现_______我要知道原因 若a,b分别表示根号10的整数部分和小数部分,求a+(1/b+4)的值 热敏电阻是一种电阻值随温度的变化而改变,且对温度很敏感的电阻.下图甲是通过某热敏电阻的电流与两端的电压关系图象.小亮同学将此电阻接入如图乙所示电路,若电源电压为8V,电流表 如题初三科学有两段阻值相同的电热丝,将它们串联在某电源两段加热一壶凉水,10分钟可烧开,若并联,则需要几分钟. 从下列物质中选择适当物质,按要求完成(1)-(3)有关反应的化学方程式(产物可利用):石灰石,锌,氯化铜,盐酸,水(1)制取单质铜(2)制取熟石灰(3)制取二氧化碳... 初三的科学题目(选择题)相同质量的碳酸钙 碳酸镁 碳酸钠 碳酸氢钠分别与足量的盐酸反应 都生成二氧化碳 其中产生想同的是哪一组a 碳酸镁和碳酸氢钠 b 碳酸钙和碳酸钠c 碳酸钙 和 语文的真正内涵是什么 (化学方程式)市售紫葡萄的表面上常附有一些浅蓝绿色的斑点,它是为了防治霉菌而喷洒的农药波尔多液.波尔多液可由硫酸铜溶液与石灰水混合而制得(配制时不能使用铁制容器,因为硫 9m-2n=3和4n+m=-1这个方程住的解是? 要m和n的值,要过程 谢谢 谢谢 1、第一个字为拼音字母D开头的俗语有什么?例如:当局者迷,旁观者清.2、第一个字为拼音字母E开头的俗语有什么?例如:二人同心,其利断金. 科学 初三 化学方程式用石灰浆粉刷过的墙壁,刚开始时会“冒汗”在敞口放置一段时间的氢氧化钠溶液中滴加足量稀盐酸,产生气泡 高次方程m⁴+4m³+2m²-9m=0怎么解? 语文是怎样定义的? 若不等式x2-8x+20/mx2+2(m+1)x+9m+4 3.8215 保留整数 保留一位小数 保留两位小数 趣味语文故事要长些的 不等式mx2+2(m+1)x+9m+4分之x2-8x+20小于0的解集为R,求实数m的取值范围 地沟油炒菜后怎么鉴别饭店傻子啊,让你进去看,消费者只能从端上来的菜判断.我中午的一个菜,冷了以后,有一些像果冻一样的胶体,但是灰色的,是那些水和油冷了以后变成这样的.我自己家的 要考趣味语文,没头绪,知道者请详情 若不等式X2-8X+20/MX2+2(M+1)X+9M+4>0对一切X属于R,求实数M的取值范围 要区别碳酸钠、氯化钠、硫酸、氢氧化钠、氢氧化钡五种物质的水溶液,至少还需要其他试剂 A、0种 B、1种 C、2种 D、3种 9m+8n=-25是1式,6m-3n=0是2式,请解式
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn