提高性能 - 循​​环项 - Vue JS [英] Improve Performance - Loop Items - Vue JS

问题描述

我有一个电子商务在线商店，其中包含商品类别和一个页面，其中包含所有可用商品(有货).

某些类别有近 1500 项.包含所有可用产品的页面有近 4000 项.

我可以非常快地使用 api 加载所有内容，项目的有效负载在 50 毫秒到 300 毫秒内交付(大小为 90kb，较大).

一开始只显示了 30 个项目.当用户滚动到页面底部时，我使用 vue-observe-visibility 加载更多内容.所以它每页"加载 30 个项目.或查看".

这些项目使用我循环遍历的项目组件.示例

<物品卡: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";:心=真"v-if="!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>

我测试了它，当用户滚动很多并且产品的增量达到 1250 个项目时，例如，当更改页面(例如带有文本的空白页面，没有 api 调用)时，单页应用程序需要 4 到 6秒改变.

有没有办法让它更有效?

解决方案

提高列表性能的提示:

• 使用虚拟滚动组件
• 不要在 v-for 中使用 v-if，尤其是当列表很大时，请始终使用 v-show.

在这种特殊情况下，你可以这样处理

<物品卡: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=filteredRecords.slice(0, 30)中的值"；:key="value.id"v-else><移动物品卡: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 这是一个小的代码重复，但它避免了检查移动道具的 N 次)

• 如果有机会，请使用 v-once 指令

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 ?

解决方案

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

这篇关于提高性能 - 循​​环项 - Vue JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！