https://vtbs.moe/ 网站页面潜在的性能隐患——真实DOM长列表

[wdpm]

问题描述（举例）

问题代码出处

https://github.com/dd-center/vtbs.moe/blob/master/src/views/Home.vue#L9-L11

      <transition-group name="flip-list">
        <card v-for="vtb in rankLimit" :vtb="vtb" hover :key="vtb.mid" class="card"></card>
      </transition-group>

问题原因：直接使用rankLimit for loop
修复建议：找个成熟的第三方Vue虚拟列表实现，或者自身实现一个简易版虚拟列表，替换原生 for loop
额外补充：其他页面似乎也有真实DOM长列表。🤣

[simon300000]

一直想上虚拟列表，也到处做实验，目前太忙没时间ww
也要先把每个元素的高度都定好

[wdpm]

@simon300000 虚拟列表中的ListItem高度一般是固定的，由你的ListItem元素高度决定，你可以让它高度自扩展，或者直接hardcode一个合适的高度。总之，真的不建议使用真实DOM，scroll时已经明显感到卡卡的。有些聪明的第三方虚拟列表库甚至可以支持动态列表item高度计算。:smile:

[simon300000]

哈哈，有时间定个高度

[wdpm]

还没实现虚拟列表的页面

• https://vtbs.moe/dd DD风云榜

就当给你备忘了。@simon300000

[simon300000]

2023年年末前一定实现！

[wudifeixue]

好像还没有解决..