知名网站建设公司电话,南京专业网站制作,中国贸易网是什么网站,如何设置网站默认首页前端列表数据太多页面卡顿就这么处理 实际场景什么是虚拟列表虚拟列表实现原理实战中虚拟列表的问题及相应解决方案 实际场景
首先看以下两个实际场景#xff1a; 场景一#xff1a;有一个数据列表#xff0c;数据量非常大且每一个数据项都有几十列甚至更多#xff0c;且后… 前端列表数据太多页面卡顿就这么处理 实际场景什么是虚拟列表虚拟列表实现原理实战中虚拟列表的问题及相应解决方案 实际场景
首先看以下两个实际场景 场景一有一个数据列表数据量非常大且每一个数据项都有几十列甚至更多且后端未做分页一次将所有的数据返回到前端此时全部渲染用户需要等待很长时间才能看到页面甚至用户的滑动操作都会比较卡。 场景二同样有一个数据量非常大的数据列表后端做了分页前端一次请求50条数据页面首次渲染非常快上拉加载也很流畅。随着用户一直上拉加载页面上的dom越来越多逐渐的上拉加载就变得卡顿了。 在以上两个场景中就是我们平时所说的长列表无法避免的问题主要原因是页面中的dom太多导致渲染卡顿。目前最优的方案是虚拟列表
什么是虚拟列表 概念虚拟列表是一种优化长列表加载性能的技术通过只渲染用户当前可见的元素极大地提高了用户体验和应用性能。 虚拟列表实现原理 虚拟列表的实现原理主要是对列表的可视区域进行渲染而对非可见区域不渲染或部分渲染。 首先需要准备两个数据源 第一个是原始数据源用于存放所有的应该渲染到页面上的数据第二个是部分数据源用于存放要渲染到可视区域和部分不可视区域的数据以下是部分数据源生成方式 部分数据源依赖原始数据源和当前可视区域生成假设我们期望页面最多渲染100条实际数据首次渲染时我们对原始数据进行遍历 若原始数据源长度小于100条则原始数据源全部加到部分数据源数组中若原始数据源长度大于100条则原始数据源中前100条数据加入到部分数据源中第100条以后的数据以 {} 的形式加入到部分数据源中。 特别说明部分数据源中添加 {}目的时为了占位即页面中虽然不渲染此条数据但依然占据位置 监听页面滚动事件更改部分数据源 设置监听事件 window.removeEventListener(scroll, handleScroll); 注意若使用前端框架或组件库设置监听事件的方式可以不同依据实际的事件监听添加方式设置监听事件在监听事件 handleScroll 中更新部分数据源 根据滚动的位置更新部分数据源中的值 通过事件对象的scrollTop属性获取当前滚动的位置假设每条数据都是同样的高度获取到一条的高度 itemHeight则用scrollTop/itemHeight 获取到当前可视区域滚动的位置第index个遍历原始数据源若当前数据在 index-50 ~ index50 之间则将此条数据加入到部分数据源中否则将{}加入到部分数据源中占位 将部分数据源遍历渲染到页面上
实战中虚拟列表的问题及相应解决方案
页面滑动过快可能会有白屏问题在此仅提供一个思路可使用骨架屏的方案处理
