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

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

【舌尖上的CTO】砂锅馄饨的交付件 微软新Visual Studio Code开发工具支持Mac和Linux 科技新创公司想做大?从CNN记者跳槽Snapchat谈起 Java二十年特别奉献:晒博文、赢大奖! 《近匠》华为创新总监蔡绪鹏:智能手表的三大感知与未解难题 从Samurai-Native框架开发谈React Native Qualcomm公司李申:Vuforia打破AR设备界线 物与物的互通:解析Thread、AllJoyn、OIC、Bonjour的特点 《天龙八部3D》中Unity使用介绍 微软推出ManifoldJS,Web App自动转成各平台本地App 专访庄晓丹:Java程序员眼中的Clojure 全面解析ECMAScript 6模块系统 七牛技术总监陈超:记Spark Summit China 2015 Project Tungsten:让Spark将硬件性能压榨到极限 Android手表在中国这样落地 ART运行时Foreground GC和Background GC切换过程分析 开创未来的关键:是什么造就了硅谷?(上) 微软前员工:开发Apple Watch应用的27个技巧 Apple Watch应用开发:从再造墨迹天气谈起 Java二十年特别策划:有奖征文,评选结果出炉! Zen=禅道:图解AMD技术战略转型 从友盟微社区看Android第三方SDK架构实践 无创客 不青春!2015全国大学生移动应用创新大赛在京启动 响应式Web开发,必懂媒体查询(系统理论+实战教程) 实例剖析:如何用Foundation For Apps创建完美Web应用 【舌尖上的CTO】兄弟肉夹馍的开发运维一体化 开创未来的关键:是什么造就了硅谷?(下) 安全漏洞影响2.5万iOS应用?AFNetworking维护者发布回应 《近匠》专访AbleCloud李海磊:IoT平台求变 腾讯、京东、微软等设计专家齐聚,探讨移动应用体验创新设计 TIOBE 2015年5月编程语言排行榜:微软系语言份额上升 无模对话框 我到底错在哪? 问一个很简单的问题?如何做一个链接到框架页! 这是不是病毒? 新作一系统需要用条形码输入,用asp.net作,需要与条形码输入器的硬件进行交流吗?条形码的硬件选用什么比较好?价格是多少? 请问各位大虾,那里有COM以及COLLECTION对象编程的文章和例程? 一个保存文件对话框的问题 一个很菜的问题,实在不会 sql语句怎么写? 关于服务器端和客户端通信的问题,急,请各位大虾帮忙 error LNK2001: unresolved external symbol "public: char __thiscall bcdtoasc::secondchar(char)" (?secondchar@bcdtoasc@@QAEDD@Z) 文本框的问题 关于 ACCESS 添加记录的问题? 为什么我在数据窗口中的sql语句中使用参数有错误?提示invalid和不完整! 在UNIX下如何编译C++程序 请教一个COM对象创建的问题 如何获取DropDownlist的SelectedItem.Text? lirun(笨笨狗)请进来领分 怎么得到数据库中的id值。 有点痛,不知道是什么病,大家帮忙看看 GOOGLE被中国"冷处理" 请介绍一本好一点的Winsock函数编程的书,电子书或者纸书都可以 关于全局CDatabase; mysqldump备份数据库时总是出错? 谁有http://211.100.6.72的源代码最好有附带的数据库连接说明。200 在2000server上安装oracle的问题,求教! 怎样深层理解delphi的类变量 数据库中日期范围怎么比较? 如何将Access的数据导入SQL-server 散分了,高手请进---.net不能够bug ???怎样在Delphi中对导出到Excel文件单元格进行划线???? 在VB中如何进行程序的数据输入有效性验证? 请上次回答我NT问题的同志进来拿分,上次只给了100 如何学winzip那样,在弹出菜单中增加一个新的项目 英国有好点的软件公司吗? 高分求救水晶报表问题? 从数据库中取最新的第10~第20条纪录的sql语句如何写啊?各位大侠帮忙啊 记录集问题 sco unix下可以运行tcpdump吗? 无法启动X,出现cound not init font path element unix:7100,removing from list...could not open default font 'fixed' 请问是否可以在VC++下编写一个声音程序,如何编写?(只要能发出一个或两个音符就可以了) 程序员今年还可以报吗? 在flash里面,用什麼命令,可以把gif變成矢量圖?? 怎么用TC编写一个显示320*240的16色位图的程序? 用什么函数可以得到msflexgrid的行号(row的值)? 请朋友们帮忙推荐几本PB8的关于B/S和三层结构编程的书 网上邻居的问题! 在ASP.NET中,控件好像不能被设置成控件数组,请高手回答 Word文章被锁定了! 非常奇怪的数据连接问题 乐晕了,散分! 什么口什么词组成什么词语 怎么求铁离子,硫酸根离子,硝酸根离子的个数比问题如下;溶液中含有镁离子,铁离子,硫酸根离子,硝酸根离子,其中铁离子,硫酸根离子,硝酸根离子的个数比3;3;1 请问人体血液内二氧化碳分压含量随年龄增长如何变化? 单能组成什么词 ZN和硫酸反应生成H2,加入NANO3和NA2SO4为什么速度不会加快,而CUSO4会加快?是因为ZN会和CU2+反应吗?而且CU2+的氧化性比H+强,那样的话H2是不是减少了? 女生长高的年龄段 为什么有机肥使用过多也会增加土壤中的硝酸盐含量?我是个新手,没什么可答谢的,只是诚恳的请教您, 圆形方孔铜钱与五株钱的区别 请问男人和女人,到底到什么年龄才正真停止长高了 做一个效果好的太阳能热水器,选择做集热器的材料最好是什么1·做一个效果好的太阳能热水器,选择做集热器的材料最好是( ).A.塑料 B.玻璃 C.金属 D.陶瓷 圆形方孔铜钱懂得进一个不认识的铜钱,怎么看怎么不知道是哪个朝代的,大师来看看 为什么有些人到某些年龄段.就会在很短的时间内长高很快. 请给这个长方形材料配两个圆,使它可以制成一个圆柱,选择什么样的圆?有几种不同的情况? 圆形方孔铜钱的重大影响快 男生长高的年龄可以到几岁? 求写一篇作文,叫身边的能人,范围很广,可以是家人,同学等等.老师要求写同学,我们班有一个女生叫陆倩,毛笔字和钢笔字写的都非常好,求大家举几个例子,就是描写她的字写得好体现在哪里,我 小明家有一块长方形铁皮,爸爸想利用这块铁皮做一个圆柱形的桶.为了不浪费铁皮,他应该选择第几号圆形铁长方形的长是 12.56 宽是 5.6 一号直径是2 二号直径4 三号直径是5 求清晰的解题思路. 圆形方孔铜钱的影响 这个词怎么来的? 一个两个字的词语七个字母的有多少重可能?一共有四个字,前面两个是爱情,后面两个字是七个字母的. 戴上电焊镜,当焊接时看不准焊口怎么办 下列物质中,不属于人的排泄废物的是:A尿液 B粪便C汗液D呼出的二氧化碳 分子式为CnH2n+2O的所有醚 手工焊接管道,水平对接固定口.315mm直径的管道,打底焊接和盖面.焊接角度摆动方法.和焊接电流 推力怎么�手工焊接管道,水平对接固定口.315mm直径的管道,打底焊接的焊接角度,运条方法和电 有谁知道的请快回答我啊 分子式为CnH2n+2O 的醇类有a种结构 而分子式为CnH2nO2 的羧酸类有b种结构则a和b的关系是A a>b B a=b 在地球上有哪些不是固态,液态和气态的东西? 女人在哪里小便 4个3mm白色发光二极管 + 2个3mm红色发光二极管并联 接3.7V 500mah锂电要接多大的电阻? 有什么东西在任何形态下(气态 液态 固态)都不导电 什么生肖是英雄 酸雨的主要成分是硫酸和硝酸,但是雷雨发庄稼,NO2溶于水生成硝酸,降落到土壤内形成硝酸盐被植物吸收这不是也是有好处的吗? 厨房里有什么东西是属于气态物质的?液态物质的?固态物质的? 世界上有多少名人伟人的生肖是属鼠的? 有5只杯口全部向上的杯子,每次将其中4只同时“翻转”,能不能经过若干次翻转,使杯口全部向下,为什么? 几种东西分固态、液态和气态空气 冰 水 铁块 干冰 水蒸气 酱油 牛奶 粉笔灰 熟鸡蛋 一代英豪的生肖是什么生肖 机制木炭是先炭化后成型吗? 谁知道人体产生的废物有哪些排出体外的途径?泌尿系统有哪些结构组成?尿是如何形成和排出的? 请问如果精子与卵子结合了,身体会有感觉么请问如果精子与卵子遇到了,身体会有感觉么 机制木炭怎样炭化 人体的废物主要以() 的形式通过()排出体外 急求诗词达人帮忙~~~~~朋友想追一女孩,让我替他作一首诗,诗最好是古典唯美一点的,其中要包含“文芬”二字!谢谢!不要现代诗啊~~~~~ 先炭化和先制棒两种工艺设备不同吗? 当大气压是101.3kpa,问位于水下面20m深处的绝对压力是多少? 自由自在 用来形容哪个生肖合适 自己的己可以组成什么词 当大气压为101.3kPa,问位于水面下20米深处的绝对压力是多少 取100mL 18.3mol/L的硫酸与Zn反应,当Zn完全溶解时,生成气体在标准状况下占有的体积为22.4L,将所得溶液将所得溶液稀释成1L,测得溶液的氢离子浓度为1mol/L,求所生成的气体中二氧化硫与氢气的 沽可以组成什么词? 什么是计量仪器检定 请问甲烷在200个大气压、100摄氏度下是什么形态,液体还是固体? “己” 可以组成几个词? 随着年龄增长身体发生了什么变化? 为了使低层住户的窗户全年都有阳光照射 深圳两幢居民之间的距离应依据()日的楼影来计算我急用 限在今天晚上做出来 2,2,3,3-四甲基戊烷与Cl2发生取代反应,生成的一氯代物有几种是与什么有关的 H原子个数? 随着年龄的增长人身体的力气是否随着变化? 月亮被太阳光照射的那面完全暴露出来,这一日,叫什么 H2SO3与,Zn反应,NaNO3固体加入后,生成H2的量是否改变,化学反应速率是否改变,如何改变 阿拉斯加雪橇犬成犬随着年龄的增长身体或毛会发生什么变化?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘