This repository has been archived by the owner on Mar 30, 2024. It is now read-only.

怎么改成虚拟列表，优化性能呢？ #2

Open

Jony1943 opened this issue May 18, 2021 · 1 comment

Jony1943 commented May 18, 2021

在做聊天框，内容多了以后，DOM元素太多会卡顿，改成虚拟列表会好很多吧，只渲染可视范围内的列表，其他用空白DOM占位撑开滚动条，但是我不知道怎么改，尤其是每一行的高度不固定的时候

Owner

mezhanglei commented May 19, 2021

在做聊天框，内容多了以后，DOM元素太多会卡顿，改成虚拟列表会好很多吧，只渲染可视范围内的列表，其他用空白DOM占位撑开滚动条，但是我不知道怎么改，尤其是每一行的高度不固定的时候
首先确定虚拟列表是什么，虚拟列表是通过预先计算好每条数据的位置和大小，用position: absolute来把数据放在应该在的位置，也就是说这种是提前计算好的，无法在渲染后得到答案。那么它的场景也是一次性处理大量列表。现在的这个列表加载是按需加载。所以给你一个改造建议：比如当你按需加载了五百条数据，你就减掉渲染数组的长度就可以达到控制dom元素过多的问题了。所以你真正的问题在于按需加载控制数量，而不是虚拟列表技术

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.