gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 17:26:15 25 4
gpt4 key购买 nike

最近在工作中的一个项目中,我最近为同时呈现的多个列表组件实现了延迟加载,这导致了性能问题。然而,今天我在 React Docs 上遇到了一个叫做 List Virtualization 的东西。
我目前使用的包:
https://www.npmjs.com/package/react-lazyload
官方文档中推荐的 List Virtualization 包之一:https://github.com/bvaughn/react-virtualized
如果有人可以解释两者之间的区别,我将不胜感激。
谢谢

最佳答案

参加聚会有点晚了,但我会在这里加上我个人收集的两分钱,这是大体上的差异。
延迟加载的想法是进行异步调用以获取出现在视口(viewport)中的新数据(从 API 端点、商店等)。这改善了用户体验,因为用户不需要等待所有数据一次加载,而只需要等待视口(viewport)中需要的数据。社交媒体平台Triller是一个很好的示例,该站点将内容延迟加载到视口(viewport)中以在用户滚动时生成无限提要。延迟加载只关心获取后续数据并将其加载到视口(viewport)中。
虚拟化是类似的,但仅呈现视口(viewport)中的内容。由于先前获取的数据离开视口(viewport),因此那些 DOM 节点也会离开。这改善了用户体验,因为滚动很长时间的用户将拥有许多 DOM 节点,因此可能会注意到性能下降。社交媒体平台Instagram是将虚拟化用于其提要的站点的一个很好的例子。当用户滚动时,只有少数帖子会保持加载在 DOM 中。
请参阅下图以获取直观表示:
Without Lazy Loading
With Lazy Loading

With Lazy Loading, User Scrolled
With Virtualization

关于reactjs - React 中的延迟加载和列表虚拟化有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63185661/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com