reactjs - React 中的延迟加载和列表虚拟化有什么区别？

Question

最近在工作的一个项目中，我最近为同时渲染的多个列表组件实现了延迟加载，这导致了性能问题。然而，今天我在 React Docs 上发现了一个叫做 List Virtualization 的东西。

我目前使用的包： https ://www.npmjs.com/package/react-lazyload

官方文档中推荐的列表虚拟化包之一：https ://github.com/bvaughn/react-virtualized

如果有人可以解释两者之间的区别，我将不胜感激。谢谢

标签： reactjsperformancelazy-loading

Answer 1

参加聚会有点晚了，但我会在这里加上我个人收集的两美分，这是广泛的区别。

延迟加载的想法是进行异步调用以获取出现在视口中的新数据（从 API 端点、存储等）。这改善了用户体验，因为用户不需要等待所有数据一次加载，而只需等待视口中需要的数据。社交媒体平台Triller是一个很好的示例，该网站懒惰地将内容加载到视口中，以在用户滚动时产生无限的提要。延迟加载只涉及获取后续数据并将其加载到视口中。

虚拟化类似，但只呈现视口中的内容。正如之前获取的数据离开视口一样，这些 DOM 节点也是如此。这改善了用户体验，因为长时间滚动的用户将拥有许多 DOM 节点，因此可能会注意到性能下降。社交媒体平台Instagram是一个利用虚拟化作为提要的网站的一个很好的例子。当用户滚动时，只有少数帖子会保持加载在 DOM 中。

请参阅下图以获取可视化表示：

---