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

Posted

技术标签:

【中文标题】提高性能 - 循​​环项 - 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 指令(如果它导致问题)

以上是关于提高性能 - 循​​环项 - Vue JS的主要内容,如果未能解决你的问题,请参考以下文章

为了提高性能,如何动态加载JS文件

新指令 v-memo,提高性能的又一利器

通过本地加载ga.js文件提高Google Anlytics性能

在 Three.js 中限制帧速率以提高性能,requestAnimationFrame?

使用 Django 通过远程数据提高 Twitter 的 typeahead.js 性能

Vue项目实战性能优化