最近，在工作中的一个项目中，我最近为同时渲染的多个列表组件实现了延迟加载，这导致了性能问题。然而，今天我在 React Docs 上发现了一些叫做列表虚拟化的东西。
我目前使用的包：https://www.npmjs.com/package/react-lazyload https://www.npmjs.com/package/react-lazyload
官方文档中推荐的列表虚拟化软件包之一：https://github.com/bvaughn/react-virtualized https://github.com/bvaughn/react-virtualized
如果有人可以解释两者之间的区别，我将不胜感激。
谢谢
参加聚会有点晚了，但我会在这里补充我个人收集到的两分钱的差异。
延迟加载的想法是，当新数据出现在视口中时，进行异步调用以获取新数据（从 API 端点、存储等）。这改善了用户体验，因为用户不需要等待所有数据立即加载，而只需等待视口中需要的数据。社交媒体平台Triller https://triller.co/是一个很好的示例，该网站将内容延迟加载到视口中，以便在用户滚动时产生无限的提要。延迟加载仅涉及获取后续数据并将其加载到视口中。
虚拟化类似，但仅渲染视口中的内容。当先前获取的数据离开视口时，那些 DOM 节点也会离开视口。这改善了用户体验，因为长时间滚动的用户将拥有许多 DOM 节点，因此可能会注意到性能下降。社交媒体平台Instagram https://instagram.com/是一个利用虚拟化作为其 feed 的网站的一个很好的例子。当用户滚动时，只有少数帖子会保持在 DOM 中加载状态。
请参阅下图以了解直观表示：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
