提高性能 - 循​​环项 - Vue JS

Posted 2023-02-23

【中文标题】提高性能 - 循​​环项 - Vue JS

【英文标题】：Improve Performance - Loop Items - Vue JS

【发布时间】：2021-11-06 20:54:39

【问题描述】：

我有一家电子商务在线商店，其中包含包含商品的类别和一个包含所有可用商品（有货）的页面。

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

我可以非常快速地使用 api 加载所有内容，项目的有效负载在 50ms 到 300ms 内交付（大小为 90kb，更大）。

一开始只显示 30 个项目。当用户滚动到页面底部时，我使用 vue-observe-visibility 加载更多内容。所以它“每页”或“视图”加载 30 个项目。

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

<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>

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

有没有办法让它更高效？

【参考方案1】：

提高列表性能的提示：

使用virtual scroller component 不要在

v-for

中使用

v-if

，特别是如果列表很大，请始终使用

v-show

。

在这种具体情况下，可以这样处理

<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这是一个小的代码重复，但它避免了检查移动道具N次）

如果有机会，请使用v-once directive

【讨论】：

我不知道为什么，但是因为我已经在 v-for 中添加了 v-if 和 v-else（避免检查 N 次移动道具的小代码重复）webapp无法在移动 chrome 浏览器中正常运行，网站完全冻结，消耗超过顶部（使用手机和带有手机设备的 pc），我不得不恢复到旧版本。在 safari 和 Mozilla 浏览器中正常工作。

我明天会进行更多测试，以确保并检查 v-once 指令（如果它导致问题）