设想无穷转动下拉加载，实践高性能页面真理

UX Planet论坛上有过这么一篇热点文章: Infinite Scrolling Best Practices，它从UX角度剖析了无穷转动加载的设想实践。

无穷转动加载在互联网上到处都有运用：
豆瓣首页是一个，Facebook的Timeline是一个，Tweeter的话题列表也是一个。当你向下转动，新的内容就奇异的“无中生有”了。这是一个获得广泛赞赏的用户体验。

无穷转动加载背地的手艺应战实在比设想中要多不少。尤其是要斟酌页面机能，须要做到极致。
本文经由历程代码实例，来完成一个无穷转动加载结果。更重要的是，在完成历程当中，关于页面机能的剖析和处置惩罚力争做到最大化，愿望对读者有所启示，同时也迎接与我议论。

机能丈量

在开启我们的代码之前，有必要先相识一下经常运用的机能丈量手腕：

1）运用window.performance

HTML5带来的performance API功用强大。我们可以运用其performance.now()准确盘算顺序实行时候。performance.now()与Date.now()差别的是，返回了以微秒（百万分之一秒）为单元的时候，越发精准。而且与 Date.now() 会受体系顺序实行壅塞的影响差别，performance.now() 的时候是以恒定速率递增的，不受体系时候的影响（体系时候可被工资或软件调解）。
同时，也可以运用performance.mark()标记种种时候戳（就像在地图上办理），保存为种种丈量值（丈量地图上的点之间的距离），便可以批量地剖析这些数据了。

2）运用console.time要领与console.timeEnd要领

个中console.time要领用于标记最先时候，console.timeEnd要领用于标记终了时候，而且将终了时候与最先时候之间经由的毫秒数在掌握台中输出。

3）运用专业的丈量东西／平台：jsPerf

此次完成中，我们运用第二种要领，因为它已完整可以满足我们的需求，且兼容性越发周全。

团体思绪和计划设想

我们要完成的页面样例如图，

虽然DOM节点自身并不是耗能大户，然则也不是一点都不斲丧机能，每一个节点都邑增添一些分外的内存、规划、款式和绘制。一样须要注重的一点是，在一个较大的DOM中每一次从新规划或从新运用款式（在节点上增添或删除款式所触发的历程）的体系开支都邑比较高贵。所以举行DOM接纳意味着我们会坚持DOM节点在一个比较低的数目上，进而加速上面提到的这些处置惩罚历程。

据我视察，在真正产物线上运用这项手艺的还比较少。能够是因为完成复杂度和收益比并不很高。然则，淘宝挪动端检索页面完成了相似的头脑。以下图，

每加载一次数据，就天生“.page-container .J-PageContainer_页数”的div，在转动多屏今后，早已移除视窗的div的子节点举行了remove()，而且为了保证转动条的准确比例和防备高度陷落，显现声清楚明了2956px的高度。

墓碑（Tombstones）

如之前所说，假如收集耽误较大，用户又飞快地转动，很轻易就把我们衬着的DOM节点都甩在千里以外。如许就会涌现极差的用户体验。针对这类状况，我们就须要一个墓碑条目占位在对应位置。比及数据取到今后，再替代墓碑。墓碑也可以有一个自力的DOM元素池。而且也可以设想出一些美丽的过渡。这类手艺在国外的一些“引领手艺潮水”的网站上，早已有了应有。比方下图取自Facebook：

我在“简书”APP客户端上，也见过相似的计划。固然，人家是native&＃8230;

转动锚定

转动锚定的触发机遇有两个：一个是墓碑被替代时，另一个是窗口大小发作转变时（在装备发作翻转时也会发作）。这两种状况，都须要调解对应的转动位置。

总结

当你想供应一个高机能的有优越用户体验的功用时，能够手艺上一个简朴的题目，就会演变成复杂题目标。这篇文章就是一个例证。
跟着 “Progressive Web Apps” 逐步成为挪动装备的一等国民（会吗？），高机能的优越体验会变得越来越重要。
开辟者也必需延续的研讨运用一些形式来应对机能束缚。这些设想的基本固然都是成熟的手艺为基础。

这篇文章参考了Flicker工程师，前YAHOO工程师Stephen Woods的《Building Touch Interfaces with HTML5》一书。以及王芃先辈关于《Complexities of an Infinite Scroller》一文的部份翻译。