用户端为保证较好用户体验，会采用上下无限滚动的方式，我们一般把这种列表叫做长列表。常见于移动端
长列表的问题：
目前看来无限滚动的长列表对用户来说体验是很好的，但是这里会有个问题，当用户滚动的屏数过多时，就会出现页面滑动卡顿、数据渲染较慢、白屏的问题，究其原因是列表项过多，渲染了大量dom节点。
为了解决上述问题，就引入了一种叫虚拟列表的解决方案。
只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能，虚拟列表其实是按需显示的一种实现。
如图示例，其组成一般包含3部分：
可视区：滚动容器元素的视觉可见区域。
列表渲染区：真实渲染列表元素的区域，列表渲染区大于等于可视区。
真实列表区：又叫可滚动区，滚动容器元素的内部内容区域。
image.png
当用户操作滚动列表后：
显示可视区中的元素（item3~item12）
隐藏可视区外中的元素（item3和item12之外的）
image.png
未完待续。。。
前言 场景是小程序长列表优化，框架基于mpvue，固定高度。（动态高度暂时先不考虑） 关于recycle-view...
iOS性能优化系列篇之“列表流畅度优化” iOS性能优化系列篇之“列表流畅度优化”
虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高...
虚拟列表使用的场景 虚拟列表是对长列表对一种优化手段，对于一些业务场景，要展示对列表很长，同时不能使用分页对方式，...
import React, { Component } from "react";import logo from...
拆包优化网络优化列表优化
学习用chrome检测性能 1 .https://googlechrome.github.io/devtools-...
android列表内存优化 背景 项目中有一个列表，准确的说是图片列表（整个列表都是图片）。可想而知占用的内存会很...
Runloop优化列表滑动卡顿
一、列表优化问题 先来看一下 app 原来的列表效果： 之前发现的问题已经优化建议有： 使用 TabLayout ...
本文标题：长列表优化之虚拟列表
本文链接：https://www.haomeiwen.com/subject/dabtidtx.html
网友评论