在 flatList 中加载大量图像是否会影响性能以及如何避免它 [英] Does load large amount of images in flatList hurt performance and how to avoid it

问题描述

(只是要注意我不想使用分页我想加载非常大的列表)

我正在使用 flatlist 渲染大约 5000 个项目.
每个项目都像这样参考照片(不是同一张照片只是例子):

(just to note I don't want to use pagination I want to load very large list)

I am using flatlist to render about 5000 items.
Each item reference photo like this (not same photo just example):

256 × 256 PNG 
30,759 bytes (30 kilobytes)

或更大.
当我处理超过 1000 个项目时，我开始遇到性能问题.

首先是这个现实问题，从 url 引用的图像是否会进入手机内存?
加载这么多图片时，有没有更好的方法来减少内存压力?

我在 ios 设备上遇到的性能问题较少，而在 android 上则更多.

Or larger.
When I go over 1000 items I start to experience performance issues.

First is this realistic concern does image that is referenced from url go in to phone memory?
Is there better way to reduce memory pressure when load this amount of images?

I experience less performance problems on ios devices more on android.

推荐答案

首先，从 url 引用的图像是否会进入手机内存?加载这么多图片时，有没有更好的方法来减少内存压力?

First is this realistic concern does image that is referenced from url go in to phone memory? Is there better way to reduce memory pressure when load this amount of images?

是的，您的图像肯定会进入手机内存，更具体地说是手机的 RAM.您已经提到您不想使用分页，但这确实是在这种情况下处理它的最佳方式.

Yes your images most definitely go into phone memory, more specifically the the phone's RAM. You've already mentioned that you don't want to use pagination but that really is the best way to handle it in this case.

另一件需要考虑的事情是在您滚动浏览不再需要的图像时清除图像缓存.然而 React Native 没有提供任何开箱即用的功能.您将不得不研究第三方缓存解决方案，例如https://github.com/billmalarky/react-native-image-cache-临时

Another thing to consider would be to clear the image cache as you scroll past the images you no longer need. However React Native doesn't provider any such functionality out of the box. You would have to look into a third party caching solution such as https://github.com/billmalarky/react-native-image-cache-hoc

这篇关于在 flatList 中加载大量图像是否会影响性能以及如何避免它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！