转载

基于 Dojo Mobile 的长数据显示优化

Dojo Mobile 提供了丰富的 Mobile 组件，方便开发人员开发 Mobile Web 应用或者混合模式 (Hybrid) 应用。用户体验是 Mobile 应用好坏的一个重要考量，特别是当显示的数据量比较大的时候，如何保证应用还能够平滑显示，防止出现因为数据较大而产生的迟滞感，是我们 Mobile 开发中经常遇到的一个问题。

为了解决这一问题，通常有以下方案：

分页请求后台数据，每页的数据量相对较少。需要用户操作，去获取下一页数据。
一次获取所有的数据，在 Mobile 端优化显示。

第一种方案适合数据量在后台，数据量很大且长度不固定。

第二种方案适合数据量中等，且内容相对固定，比如国家地区列表，联系人列表等。如果用第一种方案，分批去取，则用户体验较差。第二种方案也可以做为第一种方案的补充，当每页获取的数据量较大时，进行优化显示。

本文重点讨论第二种方案。首先通过一个案例指出当显示长数据时，如果不加处理，性能是很差的。然后介绍 LongListMixin 的原理, 利用 LongListMixin 提升性能。其次，指出提升显示性能的另外一种方式即优化 CSS。最后简单总结这两种方式。

回页首

案例介绍

为了凸显长数据对页面显示的影响，我们构建了有一张 Mobile 的 Web 页面 LongList.html，其中包含 500 条数据。请下载参考资源中的文件。

页面结构比较简单，类似常见的 Mobile 页面。整个页面用了 dojo mobile 的 ScrollableView，支持 mobile 设备上页面的上下滑动。顶部是一行标题栏，内容部分使用 dojo mobile 的 RoundRectList 组件，用于显示一个圆角矩形，包含一组 List Item。图 1 就是页面在 iPhone 的现实效果图。清单 1 和清单 2 是分别是 HTML 和 javascript 部分的主要代码。

我们在 iPhone5 手机上测试这个页面，由于需要显示大量的 Dom 节点，导致页面的上下滑动很慢，几乎无法使用。在低端手机上问题更加严重。

图 1. Long List 页面

清单 1. HTML 部分代码 (未优化）

<div id="details" data-dojo-type="dojox/mobile/ScrollableView"> <div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"  data-dojo-props="fixed: 'top', label: 'Long List'"> </div> <div id="detailsContainer" data-dojo-type="dojox/mobile/RoundRectList"></div> </div> 清单 2. Javascript 部分代码 (未优化） var container=registry.byId("detailsContainer"); for(var i=1;i<=500;i++){ var li=new ListItem({ variableHeight :true, clickable :true, noArrow :true, rightIcon :"mblDomButtonBlueCircleArrow", innerHTML :"ListItem"+i, }); container.addChild(li); }   LongListMixin 介绍

Dojo Mobile LongListMix 提升了 dojox/mobile 列表控件的滑动性能，这些控件包括 dojox/mobile/RoundRectList 以及它的所有子类：

dojo/mobile/RoundRectStoreList
dojo/mobile/RoundRectDataList
dojo/mobile/EdgeToList
dojo/mobile/EdgeToEdgeStoreList
dojo/mobile/EdgeToEdgeDataList

众所周知，如果一个列表包含许多列表项，由于数量众多的 DOM 节点需要被浏览器处理并显示，那么必然会引起性能问题。包含上百或上千个列表项的列表一般都会有性能问题，具体的数目还是取决于移动设备的性能。

如果把 LongListMixin 这个类 Mixin 到一个列表控件中，并且这个列表已经包含了 dojox/mobile/ScrollableView 或者 dojox/mobile/ScrollablePane，那么当列表滚动时，列表项会被动态的从 DOM 中移除或者添加，这样可以按需加载 DOM 节点，减少被加载的 DOM 节点数量，进而提高列表的性能。

在大部分情况下，只需要把 LongListMixin 类添加进来，列表控件的滚动性能就会自动透明的提升。如果需要的话，还可以通过调整 LongListMixin 的一些属性值来优化滚动性能。

LongListMixin 包含的属性：

page size：默认值 20，列表中同时加载的列表项数量
maxPages：默认值 5，当加载的页面超过这个数值时，之前加载的页面会被释放。
unloadPages：默认值 1，当加载的页面到达 maxPages 时，会被释放的页面数量。

LongListMixin 没有为列表控件添加任何新的方法，但是它重载了 addChild，removeChild，getChildren 和 resize 方法。所有列表项必须手动调用 addChild，removeChild 和 getChildren 方法。如果直接使用 DOM API 提供的方法进行添加或者移除列表项，这个列表有可能无法正常使用。另外，如果列表长度有变化必须告知 LongListMixin，以便能在 DOM 中加载正确数量的列表项。因为，resize 方法需要被重载了，而且一旦列表长度变化时就会被调用。这个调用过程在大部分情况下是自动进行的，但是当列表初始隐藏的情况下（比如一个列表包含在 dojox/mobile/SimpleDialog 中），resize 方法必须显示的被上层或者更上层的可滚动的视图调用才能生效。

回页首

引入 LongListMixin

就如类名所示，LongListMixin 是 Mixin 到一个基础类里的。我们只需要在 HTML 页面里加入 data-dojo-mixins=”dojox/mobile/LongListMixin”。我们继续用 iPhone5 测试，滑动性能得到了提高，基本可以满足上下快速滑动的需求。

清单 3. 引入 LongListMixin

<div id="details" data-dojo-type="dojox/mobile/ScrollableView"> <div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"  data-dojo-props="fixed: 'top', label: 'Long List'"> </div> <div id="detailsContainer" data-dojo-type="dojox/mobile/RoundRectList"  data-dojo-mixins="dojox/mobile/LongListMixin"></div> </div>

回页首

CSS 优化

除了使用 LongListMixin，我们还可以利用 CSS，让浏览器原生支持页面滑动。我们构建了一个 NativeScrollableView 继承自 ScrollableView，设置组件 overflow-y 为 auto，在纵向可以滑动。另外设置-webkit-overflow-scrolling 为 touch，支持页面惯性滑动，即用户在手机屏幕上向上或向下滑动，页面在用户手指停止后还能像有惯性一样，继续向上或向下滚动一段时间，慢慢地停止下来。最后设置-webkit-transform 为 translate3d(0,0,0)，可以启动手机 GPU 加速页面渲染。

通过设置这些 CSS，利用浏览器的原生支持，能够比较好的支持长数据滑动。但是在使用这个方案时，需要考虑浏览器兼容性问题，有些 CSS 只有 WebKit 内核浏览器支持，其他浏览器需要采用不同 CSS 样式。

清单 4. NativeScrollableView

postCreate: function() {  this.inherited(arguments);  domStyle.set(this.containerNode, "overflow-x", "hidden");  domStyle.set(this.containerNode, "overflow-y", "auto");  // enable momentum scrolling on mobile devices  domStyle.set(this.containerNode, "-webkit-overflow-scrolling", "touch");  // trigger hardware acceleration  domStyle.set(this.containerNode, "-webkit-transform", "translate3d(0,0,0)");  this.disableTouchScroll = true; },

回页首