对具有大量图像的视图反应本机渲染性能

Question

I'm experimenting with React Native and have to render a seemingly not complicated page with multiple horizontal FlatLists of images.

Looks something like this:

render() {
    return (
        <View>
            <CustomImagesFlatListView data={data1} />
            <CustomImagesFlatListView data={data2} />
            <SomeOtherComponent />
            <CustomImagesFlatListView data={data3} />
        </View>
    );
}

However I noticed that whenever that page (component) gets mounted (or loaded for that matter) there is a very noticeable screen freeze before the components are fully rendered and the UI becomes functional.

Is there something I'm missing/doing wrong or is this to be expected. There is at least upwards of 50 images (loaded from the web) in total but by using FlatList it should be lazy loaded, so this lag in performance is quite strange.

Answer 1

You can improve your performance in different ways.

1. First of all you can use cached images with https://github.com/kfiroo/react-native-cached-image (don't forget to add a long ttl and the useQueryParamsInCacheKey if the image url has params)
2. If you know image dimensions or you are displaying in the FlatList some views with images inside (and the views have always the same size) you can improve performance with getItemLayout
3. Use initialNumToRender in your FlatLists
4. Have you checked the performance page ? Maybe the JS thread is "full" and the app has to do multiple operations. You can use the InteractionManager and requestAnimationFrame to improve performances.

I have created a ThreadHelper in my React Native app and the performance are better than before (90% faster). Here is the code:

import {InteractionManager } from 'react-native';

export default class ThreadHelper{

    /**
    * Promise resolved as soon as the requestAnimationFrame goes on
    */
    nextFrame(){
        return new Promise((resolve, reject) => {
                requestAnimationFrame(() => {
                LOG.debug("ThreadHelper :: requestAnimationFrame");
                resolve();
            }); 
        })
    }


    runWhenThreadIsReady(callback){
        InteractionManager.runAfterInteractions(async () => {
            LOG.debug("ThreadHelper :: runAfterInteractions...");
            await this.nextFrame();
            callback();
        });
    }
}

You can import the ThreadHelper in your component and, when you retrieve the images you can call:

this.threadHelper.runWhenThreadIsReady(() => {
   //your code here
   //For example getImagesFromEndpoint and then this.setState({images:Array});
});

In my app I have multiple image galleries with more than 100 images each and I can display them fast. User can interact with the page without been blocked.