虚拟滚动列表，虚拟滚动的关键在于只渲染当前视口内可见的数据项，而不是一次性渲染所有数据项。这可以显著提高性能，尤其是在处理大量数据时。
以下是一个完整的虚拟滚动列表的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual Scrolling</title>
<style>
#container {
width: 500px;
height: 700px;
margin: 30px;
overflow: auto;
position: relative;
border: 1px solid #ccc;
}
.item {
position: absolute;
width: 100%;
background-color: #bfc;
border-radius: 10px;
margin: 2px 0;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById("container");
const itemHeight = 50;
const containerHeight = 700;
const buffer = 5;
let data = [];
let visibleData = [];
let startIndex = 0;
function loopFun(num) {
data = Array.from({ length: num }, (_, index) => index);
handleScroll();
}
function handleScroll() {
const scrollTop = container.scrollTop;
const visibleStart = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
const visibleEnd = Math.min(
data.length,
visibleStart + Math.ceil(containerHeight / itemHeight) + buffer * 2
);
startIndex = visibleStart;
visibleData = data.slice(visibleStart, visibleEnd);
renderVisibleData();
}
function renderVisibleData() {
container.innerHTML = "";
visibleData.forEach((item, index) => {
const div = document.createElement("div");
div.className = "item";
div.style.top = (startIndex + index) * itemHeight + "px";
div.textContent = `数据-${item}`;
container.appendChild(div);
});
}
function throttle(func, limit) {
let inThrottle;
return function () {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
loopFun(1000);
const throttledHandleScroll = throttle(handleScroll, 100);
container.addEventListener("scroll", throttledHandleScroll);
window.addEventListener("beforeunload", () => {
container.removeEventListener("scroll", throttledHandleScroll);
});
</script>
</body>
</html>
上面一大串代码，看起来比较难看，在下边我会拆开了一点点来说明。先来看一下在页面上的展示效果，如下：
对比两张效果图可以看到，不论怎么滚动，页面实际上展示的永远是 23 条数据。
声明的变量：
const container = document.getElementById("container"); // 获取元素
const itemHeight = 50; // 每个数据项的高度
const containerHeight = 700; // 容器的高度
const buffer = 5; // 缓冲区，提前加载的数据项数量
let data = []; // 获取元素
let visibleData = []; // 存储当前可视区域的数据项
let startIndex = 0; // 当前可视区域的起始索引
loopFun() 函数的作用：
// 拿到 num 条数据的索引，生成新数组。
function loopFun(num) {
data = Array.from({ length: num }, (_, index) => index);
handleScroll();
}
- Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。
handleScroll() 函数的作用：
function handleScroll() {
/** scrollTop 用于获取或设置一个元素的垂直滚动距离 */
const scrollTop = container.scrollTop;
/**
* Math.max() 静态方法返回作为输入参数给出的数字中的最大值
* Math.floor() 静态方法始终向下舍入并返回小于或等于给定数字的最大整数
*
* scrollTop / itemHeight 得到当前滚动条所处数据位置
* buffer 意味着在可视区域上方和下方各提前加载5个数据项
*/
const visibleStart = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
/**
* Math.min() 静态方法返回作为输入参数给出的数字中的最小者
* Math.ceil() 静态方法始终向上舍入并返回大于或等于给定数字的最小整数
*/
const visibleEnd = Math.min(
data.length,
visibleStart + Math.ceil(containerHeight / itemHeight) + buffer * 2
);
startIndex = visibleStart;
visibleData = data.slice(visibleStart, visibleEnd);
renderVisibleData();
}
-
scrollTop：
scrollTop 是当前滚动条的位置，表示从容器顶部到滚动条当前位置的距离（以像素为单位）。 -
itemHeight：
itemHeight 是每个数据项的高度（以像素为单位）。假设每个数据项的高度是固定的，例如 50 像素。 -
scrollTop / itemHeight：
这个表达式计算当前滚动条位置对应的数据项索引。结果是一个浮点数，表示滚动条位置对应的数据项的大致位置。 -
Math.floor(scrollTop / itemHeight)：
使用 Math.floor 将浮点数向下取整，得到一个整数索引，表示当前滚动条位置对应的数据项的起始索引。 -
Math.floor(scrollTop / itemHeight) - buffer：
减去 buffer，确保在可视区域上方提前加载 buffer 个数据项。buffer 是一个缓冲区，表示在可视区域外提前加载的数据项数量。例如，buffer 设为 5，意味着在可视区域上方提前加载 5 个数据项。 -
Math.max(0, …)：
使用 Math.max 确保 visibleStart 不小于 0，防止负索引。如果 Math.floor(scrollTop / itemHeight) - buffer 小于 0，则 visibleStart 会被设置为 0。
renderVisibleData() 函数的作用：
// 处理标签结构及文本的展示
function renderVisibleData() {
container.innerHTML = "";
visibleData.forEach((item, index) => {
const div = document.createElement("div");
div.className = "item";
div.style.top = (startIndex + index) * itemHeight + "px";
div.textContent = `数据-${item}`;
container.appendChild(div);
});
}
相当于生成了一个 div 标签，加上 class 属性 item
<div class="item">数据-1</div>
然后对这个标签进行循环展示。
{
visibleData.map((item, index) => (
<div class="item" key={item}>
数据-{item}
</div>
));
}
这一行代码，可以详细说一说：
div.style.top = (startIndex + index) * itemHeight + "px";
div.style.top
div.style：这是 DOM 元素的 style 属性，它允许你直接访问和修改元素的内联样式。
top：这是 style 对象的一个属性，用于设置元素的 top CSS 属性。top 属性定义了元素相对于其父容器的顶部边缘的距离。
(startIndex + index) * itemHeight
startIndex：这是当前可视区域的起始索引，表示第一个可见数据项在整个数据数组中的位置。
index：这是当前数据项在其可视区域内的索引。例如，如果 visibleData 包含 10 个数据项，index 会从 0 到 9。
itemHeight：这是每个数据项的高度（以像素为单位）。
准确的来说这是用来计算数据项的垂直位置的。
-
startIndex + index：计算当前数据项在整个数据数组中的实际索引。startIndex 是当前可视区域的起始索引，index 是当前数据项在其可视区域内的索引。 -
(startIndex + index) \* itemHeight：将实际索引乘以每个数据项的高度，得到当前数据项的垂直位置（以像素为单位）。 -
设置 top 属性： div.style.top = (startIndex + index) * itemHeight + ‘px’：将计算得到的垂直位置设置为 div 元素的 top 属性值。这样，每个数据项都会根据其在数据数组中的位置被正确地定位在容器中。
示例:
startIndex = 10;
index = 2;
itemHeight = 50;
计算过程：
startIndex + index = 10 + 2 = 12
(startIndex + index) _ itemHeight = 12 _ 50 = 600
div.style.top = 600 + 'px' = 600px
因此，这个数据项的 top 属性会被设置为 600px，表示它距离容器顶部 600 像素。
作用：通过这种方式，你可以确保每个数据项在容器中的位置是正确的。即使容器滚动，每个数据项也会根据其在数据数组中的位置被正确地定位，从而实现虚拟滚动的效果。
throttle() 函数的作用：
// 节流处理
function throttle(func, limit) {
let inThrottle;
return function () {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
throttle 函数是一种常用的节流技术，用于限制函数的调用频率。它在处理高频事件（如滚动、窗口调整大小等）时非常有用，可以显著提高性能并减少不必要的计算。
示例:
- func：需要节流的函数。
- limit：节流的时间间隔（以毫秒为单位），表示在多少毫秒内只能执行一次 func。
// 100 毫秒后执行函数 handleScroll
throttle(handleScroll, 100);
底部函数调用：
loopFun(1000);
调用 loopFun 函数，生成 1000 个数据项。
const throttledHandleScroll = throttle(handleScroll, 100);
使用 throttle 函数对 handleScroll 进行节流处理，确保 handleScroll 每 100 毫秒最多执行一次。
container.addEventListener("scroll", throttledHandleScroll);
向容器元素添加滚动事件监听器，当容器滚动时，throttledHandleScroll 函数会被调用。
window.addEventListener("beforeunload", () => {
container.removeEventListener("scroll", throttledHandleScroll);
});
-
window\.addEventListener('beforeunload', ...)：在窗口即将卸载时（例如用户关闭页面或导航到其他页面）触发的事件。 -
container.removeEventListener('scroll', throttledHandleScroll)：在页面卸载前移除滚动事件监听器，避免内存泄漏。
上述代码问题： 有时候滚动到第23个的时候会卡住,导致无法再滚动.
原因：问题在于设置的延时长度会导致滑动过快后卡顿。
解决方法：插入的时候可以用createDocumentFragment。
改进后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual Scrolling</title>
<style>
#container {
width: 500px;
height: 700px;
margin: 30px;
overflow: auto;
position: relative;
border: 1px solid #ccc;
}
.item {
position: absolute;
width: 100%;
background-color: #bfc;
border-radius: 10px;
margin: 2px 0;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById("container");
const itemHeight = 50;
const containerHeight = 700;
const buffer = 5;
let data = [];
let visibleData = [];
let startIndex = 0;
function loopFun(num) {
data = Array.from({ length: num }, (_, index) => index);
handleScroll();
}
function handleScroll() {
const scrollTop = container.scrollTop;
const visibleStart = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
const visibleEnd = Math.min(
data.length,
visibleStart + Math.ceil(containerHeight / itemHeight) + buffer * 2
);
startIndex = visibleStart;
visibleData = data.slice(visibleStart, visibleEnd);
renderVisibleData();
}
function renderVisibleData() {
const fragment = document.createDocumentFragment();
const existingItems = container.querySelectorAll('.item');
existingItems.forEach(item => {
if (!visibleData.includes(parseInt(item.textContent.split('-')[1]))) {
container.removeChild(item);
}
});
visibleData.forEach((item, index) => {
const div = document.createElement('div');
div.className = 'item';
div.style.top = (startIndex + index) * itemHeight + 'px';
div.textContent = `数据-${item}`;
fragment.appendChild(div);
});
container.appendChild(fragment);
}
function throttle(func, limit) {
let inThrottle;
return function () {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
loopFun(1000);
const throttledHandleScroll = throttle(handleScroll, 100);
container.addEventListener('scroll', throttledHandleScroll);
window.addEventListener('beforeunload', () => {
container.removeEventListener('scroll', throttledHandleScroll);
});
</script>
</body>
</html>
关键改进点
-
使用
createDocumentFragment：- 在
renderVisibleData函数中，使用document.createDocumentFragment()创建一个文档片段，并将所有新创建的元素添加到这个片段中，最后一次性插入到容器中。
- 在
-
避免不必要的 DOM 清空：
- 在
renderVisibleData中，首先移除不再需要的元素，然后再添加新的元素。这样可以避免每次都清空整个容器。
- 在
-
优化
handleScroll函数：- 确保
handleScroll函数只在必要的时候触发，并且通过节流函数限制其执行频率。
- 确保
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
