NavieScript + Vue takes too much to render 40 rows, How to speed it up?

Question

I want to render multiple rows as indicated it the code,

it should get the list and render it to rows, each row contains text, icon and ...,

for just 40 items it takes like 2 seconds or so to render, is it normal? or I code it in wrong procedure?

is there any method to speed it up?

in other posts I saw that someone claims that coding in Angular will improve the speed significantly, is it right?

I know that 2 seconds wouldn't be too much, but this list could get up to 2000 items too. for 200 items it take about 8 seconds, and for 2000 it will takes about 40 seconds or even crashes!

<template>

    <GridLayout
        ref="bottomPanel"
        class="bottomPanel"
        verticalAlignment="bottom" 
        rows="10 ,* ,10"
        columns="1 ,* ,5" 
    >

            <Label 
                row=1
                col=1
                verticalAlignment="center"
                :text="statusInfo"
                class="StatusInfo"
                v-if="statusInfo"
            />

            <ScrollView
                row=1
                col=1
            >
                    <StackLayout padding=5>

                            <GridLayout 
                                v-for="( item , index ) in this.$store.state.listToShow.data" 
                                :key="index"
                                class="itemBox" 
                                columns="65,*,35,33"
                                rows="*"
                            > 

                                    <Image
                                        col=0
                                        row=0
                                        class="itemAvatar"
                                        stretch="aspectFill"
                                    />

                                    <StackLayout
                                        col=0
                                        row=0
                                        class="itemIconLabelBox"
                                        verticalAlignment="center"
                                        @tap="interactiveBoxAction( item )"
                                        @touch="onTouch"

                                    >

                                            <Label 
                                                :class="'itemIcon ' + item.iconFont" 
                                                :text="String.fromCharCode( '0x' + item.icon )"
                                                textWrap="true"
                                            />

                                    </StackLayout>

                                    <Label 
                                        row=0
                                        col=1
                                        class="itemTitle"
                                        :text="item.name"
                                        @tap="interactiveBoxAction( item )"
                                        @touch="onTouch"
                                        textWrap="true"
                                    />

                            </GridLayout>

                    </StackLayout>
            </ScrollView>

    </GridLayout>

</template>

Answer 1

You should use ListView when you want to render a huge list of items.

Your iOS / Android device can not render so many Views at a time & it will affect the performance.

ListView to rescue:

• It will have it's own scroller (you should not wrap it with a ScrollView).
• You will define one or more templates.
• The layout of the template should be static, you are not suppose to use things like v-if, v-for etc., which will make it dynamic.
• But you can adjust the element itself based on data, for example changing background color based on data in the item
• This helps the OS to render only limited number of actual UI elements on screen and it will reuse the same element with different data as user scroll up / down.

There is also RadListView comes with lot more features out of the box, like swipe actions, various layouts to align your list items etc.,