# 背景在公司项目中，需要给商品配置大量的属性值，可能其中一个属性的值数量就有成百上千条。一个商品会有很多属性，如果把这些属性和属性值同时都渲染出来，就会导致在一个页面上**渲染很多的节点**，导致浏览页面时**卡顿** 从而导致**应用性能**和**用户体验**都不好。为了解决上述原因导致的应用性能和用户体验问题可能比较常见的解决方法就是：**分页**。另一个就是近两年常听到的一个解决方法：**虚拟列表**。下面简单分析下虚拟列表的实现方式 # 分析简单分析下，虚拟列表主要由以下几个部分构成： - **实际列表：** 指你所需要展示的全部数据渲染成的列表 - **可视区：** 指数据需要展示时能看到的最大区域 - **已加载区** - **未加载区** 如下图所示： ![虚拟列表示意图](https://ik.imagekit.io/bdwtrkjs9a/blog-image-folder/article/admin-content-1736056828060.png) 由图可以看出我们实际所能看到的数据（**即可视区展示的内容**）只占所有的数据的很小一部分还有很大一部分是我们暂时不需要渲染出来的如果我们一次性把其他不需要的数据也同时渲染到页面上，会造成DOM的浪费。所以我们考虑：能不能**只渲染可视区的DOM节点，其他的节点等需要用到的时候再渲染出来，使页面上始终只存在可视区的节点，这样就大大减少了DOM节点的数量。** # 实现页面代码如下 - **#listView：** 表示你需要展示列表内容的区域，即**可视区**,本文中为 `body` 高度 - **#zhanwei：** 用来表示占位，是滚动条出现，它的高度就是所有数据渲染到页面时的高度，需要在js中计算 - **#listContent：** 是实际列表内容的容器。 ```html

``` ```css body{ height: 400px; } .list-view { height: 400px; position: relative; overflow-y: auto; } .zhanwei { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .list-content li { height: 100px; } .list-content li:nth-of-type(odd) { background: #00ccff; } .list-content li:nth-of-type(even) { background: #ffcc00; } ``` ```js // 模拟常列表的数据 function setLongData() { let data = []; for (let i = 0; i < 1000000; i++) { data.push({id: "item" + i, value: Math.random() * i}) } return data; } function selectDom(selector) { return document.querySelector(selector) } // 加载数据并插入DOM到页面 function loadData(start, end) { // 截取数据 let sliceData = setLongData().slice(start, end) // 创建虚拟DOM let F = document.createDocumentFragment(); for (let i = 0; i < sliceData.length; i++) { let li = document.createElement("li"); li.innerText = JSON.stringify(sliceData[i]) li.className = sliceData[i].id F.appendChild(li) } selectDom(".list-content").innerHTML = ""; selectDom(".list-content").appendChild(F) } // 设置占位DOM的高度 document.getElementById("zhanwei").style.height = `${100 * setLongData().length}px` // 计算可视区能展示几列数据，此处假设一列的高度为 100 px let count = Math.ceil(document.body.clientHeight / 100) let startIndex = 0; // 可视区第一列的索引 let endIndex = count; // 可视区最后一列的索引 loadData(startIndex, endIndex) // 滚动加载数据方法 function scrollFunction() { // 获取滚动条距离可视区顶部的距离 let scrollTop = document.getElementById("listView").scrollTop; startIndex = Math.floor(scrollTop / 100); endIndex = startIndex + count; loadData(startIndex, endIndex) // 滚动时内容区会发生偏移 // 通过 transform：translate3d将偏移的内容移回可视区 document.getElementById("listContent").style.transform = `translate3d(0, ${startIndex * 100}px, 0)` } document.getElementById("listView").addEventListener("scroll", scrollFunction) ``` 最终结果如图，可以看出DOM节点的数量始终没有变化 ![虚拟列表结果](https://ik.imagekit.io/bdwtrkjs9a/blog-image-folder/article/admin-content-1616727398983.jpg?updatedAt=1736057294532) # 2025-04 优化版上一个版本在滚动时，会出现闪动的问题 :sweat_smile: ，现在优化下,代码如下，里面基本都有注释 :v: ```html

``` ```css .container { border: 1px solid #eee; height: 300px; width: 300px; overflow: auto; position: relative; box-sizing: border-box; } .zhanwei { position: relative; } .item { position: absolute; top: 0; width: 100%; height: 50px; border: 1px solid #eee; will-change: transform; box-sizing: border-box; } .item:nth-of-type(odd) { background: #00ccff; } .item:nth-of-type(even) { background: #ffcc00; } ``` ```js let container = document.querySelector('.container'); let zhanwei = document.querySelector('.zhanwei'); let itemList = []; // 假设有10000条数据 for (let i = 0; i < 10000; i++) {// 生成10000条数据 itemList.push({ index: i, content: `Item ${i}` }); }; let buffer = 5; // 多渲染几条，避免滚动时看着异常 let itemHeight = 50; // 每条数据的一个默认最小高度 let heights = new Map();// 记录渲染的每个 item 的高度，不定高版本需要 let offsets = new Map(); // 记录每个 item 的偏移量，即每个item距离顶部的距离 let rendered = new Map(); // 存储已渲染的数据 // 更新偏移量, 根据item高度，计算 zhanwei 元素的高度，好让container出现滚动条 function updateOffsets() { let offset = 0 for (let i = 0; i < itemList.length; i++) { let h = heights.get(i) ?? itemHeight; // ?? 是空值合并运算符，当左边为null或者undefined时使用右边值，和三元运算符相比，排除了 0 的干扰 offsets[i] = offset; offset += h + 5; // 加上了5个像素的间距 } zhanwei.style.height = offset + 'px'; } // 渲染数据 function render() { let scrollTop = container.scrollTop; let viewHeight = container.clientHeight; let start = 0; // 查找视口第一个item的索引 while (start < itemList.length && offsets[start + 1] < scrollTop) { start++; } let end = start ;// 查找视口最后一个item的索引 while (end < itemList.length && offsets[end] < scrollTop + viewHeight) { end++; } start = Math.max(0, start - buffer); end = Math.min(itemList.length, end + buffer); let nextRendered = new Map(); // 当前渲染的数据 for (let i = start; i < end; i++) { if (!rendered.has(i)) { let item = document.createElement('div') item.className = 'item' item.style.transform = `translateY(${offsets[itemList[i].index] + 'px'})` item.textContent = itemList[i].content container.appendChild(item) rendered.set(i, item) } nextRendered.set(i, rendered.get(i)) } // 不可见的区域移除 for (const [i, el] of rendered.entries()) { if (!nextRendered.has(i)) { container.removeChild(el); } } // 更新 rendered rendered.clear(); for (const [i, el] of nextRendered.entries()) { rendered.set(i, el); } } container.addEventListener("scroll", render); updateOffsets() render() ``` # 最后这只是一个简单实现，要在实际项目中应用还需要深入研究。 **感谢您的阅读** :heart:

理解CSS3 的 max/min-content及fit-content等width值