Skip to content

根据Android RecyclerView理念实现的一个循环视图列表组件,旨在解决大数据量列表展示时由于渲染大量DOM节点导致的页面卡顿问题。An RecyclerView(Android) like list component.

License

Notifications You must be signed in to change notification settings

passerA/recycler-list-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

recycler-list-vue

简介

一个0依赖,根据Android RecyclerView理念实现的一个循环视图列表组件,旨在解决大数据量列表展示时由于渲染大量DOM节点导致的页面卡顿问题。

功能要点

  • 超大数据量毫秒级渲染
  • 具有可操作性的滚动条
  • 列表功能的深度再定制

超大数据量毫秒级渲染

列表采用了安卓官方组件RecyclerView的实现原理,对DOM节点进行循环回收使用,从根本解决因数据量过大而导致的页面渲染卡顿。

经过实际测试,普通的vue列表组件在渲染超过5千条数据时,页面首次渲染时就会明显发生卡顿,数据量进一步增大时,渲染时间和页面响应时间也会线性增长,同时大量的列表元素同时渲染也会使页面内存大量增加最终导致页面内存溢出而崩溃。

本组件经过测试,在排除数据生成过程(异步请求或同步循环生成)后,在数据量达到5万条的规模下时,列表的首次渲染时间仍保持在健康的10ms以内。

具有可操作性的滚动条

由于数据量巨大,如果只能依靠滚轮进行列表滚动显然是捉襟见肘的,然而由于组件只是渲染了一部分列表元素,所以实际上浏览器原生的滚动条是无法正确地起作用的。这也是组件内置了一个重新实现的滚动条的原因。

在小数据量下,滚动条慢速拖动可以对列表进行平滑滚动。但在大数据量下,即使滚动条只拖动了一个像素,实际上可能需要瞬间滚动几百个元素的距离,所以在大数量下滚动条可以实现元素的精准定位;同时在快速拖动时组件内部又通过了更改滚动逻辑以及节流等手段,最大程度避免了可能由列表加载和渲染引起的卡顿。

列表功能的深度再定制

经过巧妙的封装,组件的功能逻辑完全是对外封闭的。二次封装的开发者可以通过自定义list-view组件以及list-view-item组件,按照规定的方式进行封装,即可实现上层业务逻辑而不用接触到组件内部逻辑。具体例子在项目中已经有封装好的几个功能组件,包括:大数据量树形组件、滚动加载列表、大数据量表格等

An RecyclerView(Android) like list component.

About

根据Android RecyclerView理念实现的一个循环视图列表组件,旨在解决大数据量列表展示时由于渲染大量DOM节点导致的页面卡顿问题。An RecyclerView(Android) like list component.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published