Improve Performance - Loop Items - Vue JS

Question

I have an ecommerce online store that has categories with items and one page with all items available (in stock).

Some categories have close to 1500 items. The page with all products available has close to 4000 items.

I can load everything with the api very fast, the payload of the items is delivered in 50ms to 300ms (size of 90kb, the larger).

Only 30 items are show at the start. I use vue-observe-visibility to load more when the user scrolls to the bottom of the page. So it loads 30 items "per page" or "view".

The items use a item component where I loop through. Example

<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id">
 <item-card 
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:heart="true" v-if="!mobile">

<item-card-for-mobile
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:quickview="true"
v-else>
<div>

I tested it and when the user scrolls a lot and the increment of products gets to 1250 items for example, when changing the page (for example blank page with text, no api call) the single page app takes like 4 to 6 seconds to change.

Is there a way to make it more efficiently ?

Cosimo Chellini · Accepted Answer · 2021-09-10 15:16:17Z

2

tips to improve the performance of a list:

use the virtual scroller component
do not use v-if inside a v-for, especially if the list is huge, use always the v-show.

In this specific case, you can handle it in this way

<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-if="!mobile">
 <item-card 
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:heart="true">
<div>

<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-else>
 <item-card-for-mobile
:product_id="value.id" 
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')" 
:product_price="value.product_price" 
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale" 
:quickview="true"
>

<div>

(ps this is a small code duplication but it avoids checking N times the mobile prop)

when you have the opportunity use the v-once directive

answered Sep 10, 2021 at 15:16

Cosimo Chellini

1,7201 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rocket_moon Over a year ago

I don't know why, but since I've added the v-if and v-else in the v-for (the small code duplication that avoids checking N times the mobile prop) the webapp can't function correctly in mobile chrome browsers, the site completely freezes and the consumption goes over the top (using phone and pc with phone device ), i had to revert to and older build. In the safari and Mozilla browser works correctly.

rocket_moon Over a year ago

I'll run more tests tomorrow to make sure and check also the v-once directive (if it is causing the problem)

Collectives™ on Stack Overflow

Improve Performance - Loop Items - Vue JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related