--- theme: smartblue --- 虚拟列表赶紧用起来，轻轻松松解决超多重复DOM节点造成的卡顿~ 以下有三种不同级别的虚拟列表，分别针对生成的重复DOM节点是固定高度、不同高度和动态变化高度~ ### 1.基础段位：固定高度 ![tutieshi_640x594_13s.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f188ebec78624542bea349d5f2e50f80~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=640&h=594&s=10684971&e=gif&f=130&b=fbf9f9) 虚拟列表的原理其实就是以下几条： ①一个外层盒子提供滚动事件 ②外层盒子中装的第一个是platform，一个空盒子，这个空盒子的高度是列表如果真实渲染应该有的高度，作用是为了撑开外层盒子，提供滚动条 ③外层盒子中装的第二个是展示列表盒子，这个盒子中放置所有现在应该出现在页面上的列表项和前后缓冲区。该盒子采用绝对定位，top值根据滚动位置实时改变，让展示列表不论怎么滚动一直出现在页面上 ④酌情给一些在页面展示之前之后的缓冲区，防止因为用户滚动过快而造成的空白 ```vue ``` ### 2.进阶段位：不同高度 ![tutieshi_640x657_7s.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcd4bb4a0396454a8ce375c77458e91a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=640&h=657&s=4685392&e=gif&f=65&b=fdfcfc) 与固定高度不同，列表项的高度是不固定的，所以会出现以下这些难点： ①无法通过页面高度除以列表项高度得到应当展示的数量，也就是展示列表的长度 ②无法通过滚动了的高度scrollTop除以列表项高度得到此时应该展示的列表项Index ③无法直接通过ListData的长度乘以列表项高度得到platform的高度对于以上难点我们的解决方案： ①设置一个预告高度，用于计算页面展示的数量，该预估高度建议偏小，避免出现页面展示数量不够的情况 ②设置一个position数组，计算并存储每一个列表项的top\bottom\height值，通过比较scrollTop和列表项的position可以得到此时应该展示的列表项Index ③通过position数组获取最后一个列表项的bottom值，即为platform的高度 ```vue ``` ### 3.高阶段位：变化高度这种情况可能出现在比如列表项因为太长而设置了展开/收缩按钮，此时列表项的高度是动态发生变化的，这种情况和上一种情况差不多，区别只在于这种情况只需要在点击按钮的时候将position更新即可~所以在这里不做代码演示啦 ### 总结了解了原理要写出来还是不难的~但我个人感觉有的时候前端的进阶难就难在止步于此，现在的浏览器性能好，可能写N个DOM都不会卡顿，很难会有觉悟自己去写一个虚拟列表来试试看性能是不是更好。希望自己永不止步，永远进步