您的位置:澳门新葡亰平台官网下载 > 概况 > 用HTML5贯彻三星平板应用Infiniti平滑滚动

用HTML5贯彻三星平板应用Infiniti平滑滚动

2019-11-25 04:26

目录

不久前,Sencha创建了Fastbook,这是一个模仿Facebook原生应用的HTML5应用,在iOS与Android上的性能表现差不多,Sencha借此想要证明“HTML5现已就绪”。

  1. 什么是流
  2. 移动设备上无限列表的挑战
  3. 技巧1移除图像
  4. 技巧2隐藏页面
  5. 技巧3删除页面
  6. 技巧4避免缩放和盒阴影
  7. 技术5减少DOM节点
  8. 技术实现的视频
  9. 失败的尝试
  10. 致谢

Facebook CEO Mark Zuckerberg几个月前曾经说过“公司最大的失误就是在HTML5上投入太多,因为HTML5尚未就绪”,公司决定为iOS与Android创建原生应用,后者在一周前已经发布。常见的说法是HTML5尚未“就绪”、速度不够快、由于缺少合适的工具导致开发起来困难重重。

 

来自Sencha(创建了HTML5及工具的知名公司)的两位开发者决定证明HTML5已经就绪,并通过几个月的业余时间创建了Fastbook。Fastbook是个HTML5应用,模仿了Facebook的原生应用,通过Facebook API进行真实的FB数据访问(你应该在移动设备上使用该应用,在桌面浏览器中似乎不行)。

前言:

下面的视频展示了在iOS/iPhone 4S与Android/Galaxy Nexus上对原生Facebook应用与Fastbook进行的测试。令人惊讶的是,在加载动态新闻并滚动新闻时,HTML5应用的性能与FB原生应用 一样好,在几处甚至还超越了FB应用(也许需要FQ才能观看视频——译者注):

        LinkedIn 5月2日发布了新的iPad版本,它基于HTML5制作,在体验和界面上非常出色,在使用中可以发现它和原生应用基本没有任何差别。

  • 在不同视图间切换时,HTML5应用会缓存数据。FB原生应用则会重新加载动态新闻
  • Fastbook使用了嵌套的无限列表来展示评论,这提供了更棒的用户体验
  • Fastbook还提供了landscape布局
  • 在Android/Galaxy Nexus上,HTML5应用加载数据的速度要快于原生Facebook应用
  • Fastbook创建者认为如果使用“网站开发方式”并且没有使用“正确的应用开发工具”的话,那么HTML5应用的表现就会很差劲。

    他们还发现Facebook的原生应用至少有两处大的瑕疵:

    • 它依然是个混合应用:“News Feed已经被移到了本地,并且拥有设定页面,但很多其他应用UI只是简单地向m.facebook.com发送HTTP GET请求而已。现在的原生Facebook应用是个混合Web/原生应用:既有在m.facebook.com上渲染并在UIWebView上显示的内 容,也有原生的Objective-C组件”。
    • 它所传输的数据超过了自身的需要,每10个条目就需要传输15KB到20KB的gzip压缩JSON数据,这其中很多数据并不是渲染实际视图所需要的。在代理服务器上清除FB数据后,Sencha团队将数据传输量减少了90%。

    为了让示例能够成功运行起来,Sencha对其Touch框架进行了几处改进:

    • 为拥有未知数量条目的页面添加了一个新的Infinite List组件。该列表包含了少量DOM结点,可以重用以渲染前一个/下一个条目。这有助于减少内存使用量,并且会极大降低大页面的渲染时间。
    • 添加了一个新的Sandbox Container,“以编程的方式拆分复杂视图并将其渲染到自己的iframe中,这会将DOM树分割开来”。这么做的好处在于,动态新闻显示会更快,因为News Feed、Timeline与Story视图现在可以使用不同的容器了。
    • 与现有Task Queue更好的集成,这可以“防止对DOM读写的交叉,消除了不必要的布局。这与新的沙箱技术的结合能够极大减少复杂视图代价高昂的布局,比如说Timeline与News Feed”。
    • 添加了一个新的AnimationQueue类,它会将耗时的任务推迟到CPU空闲时执行。这对滚动很有帮助:当用户快速滚动动态新闻时,图像加载与渲染会暂停,直到滚动停下来为止,这是一种推荐做法。
    • Fastbook使用了WebWorkers,它可以在单独的线程而不是UI线程中获取数据,使得滚动更加平滑。

    如果说去年夏天HTML5还不行的话,那么Sencha的这个示例就表明了现在的HTML5可以与原生应用一样快,这证明了HTML5现已“就绪”,即便对于Facebook这种大型Web应用来说亦是如此。

    Sencha还发起了HTML5 Is Ready,这是一个应用竞赛,提供了$20,000奖金和设备,为的就是证明“优秀的开发者配上优秀的HTML5工具是可以开发出惊艳的应用的”。

图片 1

        关于这个版本,有两篇文章非常有价值,深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。

        第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容:

 

  • LinkedIn and themobile web

 

        LinkedIn开始越来越多的采用HTML5来开发移动Web应用。

 

  • Now, with more Node.js

 

        大量使用了node.js。

 

  • “Responsive design” just doesn’t work

 

        他们认为响应式网页设计对简单的、一次性的网站很有用,但是对应用或者社交网络来说,它没有那么好。

        -------- -------- -------- -------- 华丽的分隔线

        而下面一篇文章讲述了LinkedIn是如何使用HTML5在iOS中实现平滑无限滚动以及内存和性能优化的。

LinkedIn iPad版:用HTML5的5项技术实现无限平滑滚动

        作者:TrunalBhanse

        译者:蒋宇捷

        这是在一系列博客文章中的第二篇,我们将聊聊LinkedIn新的iPad应用。在第一篇文章中,我们谈到了如何使用HTML5本地存储建立敏捷的移动体验,而这篇文章我要讲讲当实现一个无限翻页的列表时所面临的挑战。

什么是“流”?

        当iPad项目开始时,我们考虑过如何才能为用户创造一个引人入胜的内容消费体验。我们决定以“流”的方式来展示文章、网络更新,以及其他类似的内容:一个可以无限翻页的界面。这里是页面流的第一页:

图片 2

移动设备上无限列表的挑战

        和台式机相比,移动设备具有更少的内存和更低的CPU主频。如果在HTML页面中渲染很长的列表,你会面临运行设备崩溃的危险。这使得在移动设备上构建大型的HTML5互动应用成为一个挑战。Native技术提供了UITableViewController来建立长的,无限滚动的列表。UITableView包含可复用的UITableViewCells来优化内存,性能以及响应。而针对HTML5我们没有任何现成解决方案。因此,我们将自己实现一个!

技巧1:移除图像

        UIWebView或者移动Safari浏览器对图像有严格限制。我们的页面流里铺满了大尺寸图像,所以很快就会达到上限。一种选择是使用HTML5Canvas绘制图像,不会带来内存问题。然而我们发现在画布上绘制非常大的图像相当缓慢,所以我们不得不采取另一种方法:当一副图像完全“流”出屏幕时,用另一副非常小的图像替换img标签的“SRC”属性。这能确保渲染大型图像所使用的内存被定期释放。此外,我们保证并没有引入图像空src属性的错误。

技巧2:隐藏页面

        释放图像并没有回收足够的内存来防止崩溃。因此,我们开始通过将CSS 的visibility属性设置为hidden 来隐藏流的独立页面(图2表示“隐藏”的页面)。经过这种调整,我们不仅看到了更多的内存被回收(这样应用程序就不会崩溃),而且渲染速度也更快,因为浏览器不会为界面上“隐藏”的页面进行绘制。

技巧3:删除页面

        采用隐藏的页面可以覆盖80%的情况。但是余下的20%仍然会导致应用程序崩溃!我们更进一步,开始删除不需要的页面。作为副作用,如果我们删除当前页面左侧的页面,页面流会左移,而用户将失去所在位置。为了保持滚动位置,我们不得不在移除页面时(即DOM节点)用同样高度和宽度的空白页面来取代(图2中示意的“占位符”)。例如,如果用户正在浏览第5页,我们删除第0页,并用占位符取而代之。

        采用了上述的3种技术,我们的流开始类似于下面图里的样子。 正如你可以在图1中看到的一样,如果用户正在查看第3页,前一页和后一页将完全加载。而当用户决定向前或者向后翻页时,他可以看到完全呈现的页面。当用户试图滚动时,我们开始加载图像并渲染页面。它可以在iPad模拟器上完美运行,但在实际设备上,你可以看到滚动性能的下降。

 

图片 3

图1  

 

图片 4

图2

        正如图2所示,当用户翻动到第5页,第0和第1页将会被删除,第2页将会隐藏,而第3页移除了所有图像。此时,用户可以继续向前翻页,其它页面将根据它们和可见页面之间的距离来决定是移除图像、隐藏还是删除自身。

        我们不得不为不同版本的iPad使用一个可变大小的“窗口”。例如,iPad1内存最少,所以我们不得不给它一个非常小的窗口:

[html] view plaincopyprint?

  1. getConfig : function() {  
  2.   
  3.    //默认设置  
  4.    var config = {  
  5.      size : 3,  
  6.      maxVisibleOnOneSide : 1,  
  7.    };  
  8.   
  9.    //根据设备更新设置  
  10.    if($isDesktop || $native.isNative() && $os.ipad) {  
  11.      //检测是ipad1还是ipad2  
  12.      if($isDesktop || $native.getDeviceVersion() > 1) {  
  13.        config.size = 7;  
  14.        config.maxVisibleOnOneSide = 2;  
  15.      }  
  16.    }  
  17.    return config;  
  18.   
  19.  }  

    getConfig : function() {

    //默认设置
    var config = {
      size : 3,
      maxVisibleOnOneSide : 1,
    };
    
    //根据设备更新设置
    if($isDesktop || $native.isNative() && $os.ipad) {
      //检测是ipad1还是ipad2
      if($isDesktop || $native.getDeviceVersion() > 1) {
        config.size = 7;
        config.maxVisibleOnOneSide = 2;
      }
    }
    return config;
    

    }

技巧4:避免缩放和盒阴影

        按照之前的经验,我们使用两个HTML / CSS的优化技巧来改善性能:

 

  • 通过HTML IMG标签中指定宽度和高度属性来避免客户端缩放图像
  • 避免CSS盒阴影:它在WebKit下很慢

 

技术5:减少DOM节点

        经过上述优化,你是否预期应用再也不会崩溃?错了!在测试过程中,上述技巧让应用程序运行的时间更长,但一段时间后它仍然会崩溃。

        根据之前iPhone应用的经验,我们知道保持DOM节点最少是平滑滚动和保证足够内存的关键点。 记住这一点后,我们将所有占位所用的节点合并为一个虚拟的,相同大小的节点。结果是:不管我们滑动到多少页,页面流不会在任何设备上崩溃!最终机制如图3所示:

图片 5

图3

技术实现的视频

        这里有一个当用户滑动翻页时,DOM所表现出来行为的视频。左边我们在Chrome窗口中加载页面流。而在右边,我们通过Chrome的开发者工具来展示如何添加或删除节点和通过虚拟页面的宽度来填补被删除的网页。 请注意DOM节点是如何保持在一个恒定的数量的,以及UL 的第一个li节点(“虚拟”节点)大小是如何增长的(你可能需要全屏播放视频来看)。

失败的尝试

        我们并没有在第一时间得到正确的结果,所以必须要列出我们一些曾经失败的尝试。我们最开始使用多个UIWebViews来各自渲染一个页面并用UISwipeGestureRecognizer来翻页。 然而我们很快就意识到,在本地应用程序使用多个Web视图在内存和性能方面是一种糟糕的方式。

        随后我们尝试了和3-DIV类似的方法。它可以工作,但是我们对滑动翻页的性能并不满意。 有时如果用户在翻页,我们同时在渲染一个页面,单线程的UIWebView 将无法添加到页面流里面。

致谢

        感谢Akhilesh Gupta, AarthiJayaram, AshitGandhi, KiranPrasad和Ganesh Srinivasan。

        此外,特别感谢 Ryan帮我为这篇文章录制视频。

        原文链接:《LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5》

        转载请注明:来自蒋宇捷的博客

什么是流 移动设备上无限列表的挑战 技巧1移除图像 技巧2隐藏页面 技巧3删除页面 技巧4避免缩放和盒阴影 技术5减少DOM节点 技术实现...

本文由澳门新葡亰平台官网下载发布于概况,转载请注明出处:用HTML5贯彻三星平板应用Infiniti平滑滚动

关键词: