[发明专利]一种提高超长列表滑动性能和用户体验的方法

说明书

本发明公开了一种提高超长列表滑动性能和用户体验的方法，具体包括DOM回收、占位骨架图和滚动锚定三种方法。本方法通过DOM回收技术，可以让长列表页面的节点数保持在一个较低的值，这样会占用较少的内存且可以优化每一次重新布局的系统开销，不会在滑动页面的时候出现卡顿；通过占位骨架图，在用户较快的滑动长列表页面的时候，可以先以骨架图的形式占位在列表条目的对应位置，不会造成滑动的卡顿，且会有比较好的过渡效果，不会让用户感觉到生硬；通过滚动锚定的技术，在长列表显示的窗口尺寸发生变化的时候，能够重新定位到用户改变屏幕窗口尺寸之前的位置，极大的提高用户体验。

技术领域

本发明涉及长列表技术领域，具体为一种提高超长列表滑动性能和用户体验的方法。

背景技术

长列表这种展示形式不管在App还是在网页中、PC端还是移动端中，都是普遍存在的。目前长列表页面的主流展示方案都是把所有数据统一展示在页面上，数据较多的时候列表会很长，占用较大的内存、渲染性能很差，且滑动列表会有明显的卡顿，用户体验极差；目前长列表页面数据较多的时候，都会在数据层面做一个分页的操作，滑动到页面底部的时候需要等待下一页数据的获取，才能展示后续列表，会有明显的卡顿，且上一页的尾部链接无法点击，因为后面的内容会不断的把它们挤走，用户体验不佳；当用户有改变网页浏览器的大小、或者将手机从竖屏改为横屏这类改变页面显示窗口尺寸的行为，之前滑动到的列表项就会被移动到可见范围之外，用户体验不佳。

发明内容

本发明的目的在于提供一种提高超长列表滑动性能和用户体验的方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种提高超长列表滑动性能和用户体验的方法,包括DOM回收、占位骨架图和滚动锚定三种方法，具体如下：

DOM回收方法包括以下步骤：

A、根据窗口尺寸和列表条目的平均高度，算出首屏需要展示的条目数量与范围，如0——20；

B、当页面进行滚动的时候，根据列表条目的高度和页面的滚动高度，算出当前屏需要展示的条目范围，如10——30；

C、将0——10的DOM结构从前面移动到后面，作为20——30的条目需要展示所用到的DOM结构，并通过给列表包含框添加一个等于0——10条目高度总值的填充高度值，使滚动条位置能够连续，而不会发生跳动；

占位骨架图方法包括以下步骤：

a、进行页面滚动的时候，会检查是否已经接近当前页面的底部，如果将要接近，开始请求下一页的数据；

b、取当前列表条目的平均高度和基本样式，生成骨架图，占位到列表条目的对应位置；

c、下一页数据获取成功后，用实际内容去替换步骤b中的骨架图。

优选的，滚动锚定方法包括以下步骤：

1)、当页面滚动的时候，我们会根据当前页面的滚动高度和每个列表条目的高度，算出当前窗口最顶部的列表条目的索引值以及偏移值；

2)、当窗口尺寸发生变化，或者方法二中的占位骨架图被实际内容替换的时候，会根据步骤1)中的计算出的值，计算出使索引值对应的条目保持改变之前位置的页面滚动高度；

3)、根据步骤2)中的滚动高度，去改变当前页面的滚动高度，从而使变化之前的窗口最顶部的列表条目依然在窗口最顶部。