uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!

uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!

开发环境 版本号 项目创建方式
Windows Windows 64位家庭版 HBuilderX

示例代码:

<template>  
    <list  ref="list"   @loadmore="loadMore" loadmoreoffset="20" @scroll="onScroll">  
        <refresh class="refresh"  @refresh="onRefresh" @pullingdown="onPullingDown" :display="refreshing ? 'show' : 'hide'">
            <text class="refresh-text">{{refreshText}}</text>  
        </refresh>  
        <cell v-for="(item,index) in list" :key="index" class="list">  
            <cell-Vod-Item :vo="vo" v-for="(vo,key) in item" :key="key"></cell-Vod-Item>  
        </cell>  
        <cell class="loadmore">  
            <text class="loadmore-text">{{loadingText}}</text>  
        </cell>  
    </list>  
</template>

cell-Vod-Item组件

<template>  
    <div>  
        <div class="item-pic" >  
            <image class="vod-pic" :src="my_url_img(vo.vod_pic)" mode="aspectFill">  
            </image>  
            <div class="cost" v-if="vo.vod_remark">  
                <text class="cost-text" >{{vo.vod_remark}}</text>  
            </div>  
            <div class="bottom-bg">  
                <text class="sense">{{vo.vod_score}}</text>  
            </div>  
        </div>  
        <div class="item-bottom">  
            <text class="item-name text">{{vo.vod_name}}</text>  
            <text class="item-Star">类型:{{vo.vod_class ? vo.vod_class : vo.type.type_name}}</text>  
        </div>  
    </div>  
</template>

别说什么“”请提供完整示例“,完整包括请求验证各种封装+后端,一下子发不过来。后端在本地搭建 也是开发阶段,这点遍历方式详细官方技术还是分分钟能写出来,图片列表数据可以调用腾讯视频的电影列表,我也是调用那里的。

操作步骤:

不需要什么步骤,打开页面就是这样的

预期结果:

不要卡顿

实际结果:

很卡顿

bug描述:

同样是json数据和图片列表,网页使用jquery 的$ajax + for 遍历 都不至于如此卡顿,vue H5端 端浏览器运行也不会卡,nvue 的list 还号称有内存回收机制!!!!!

重点:图片尺寸 宽770px 高1080px ,也不算很大。地址:http://puui.qpic.cn/vcover_vt_pic/0/mzc002000w08m6u1614051201965/0 在列表中用css控制为 width: 245rpx; height: 350rpx;

在这个社区中也有类似的帖子,都是没得到什么有效的回复就不了了之。。。。

演示视频

备用演示视频

视频中可以看出根本无法流畅的上下滚动,都是一卡一卡的。


更多关于uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

列表不能使用这么大的图,列表的图最多几十k。 你的图,宽770px 高1080px ,体积270k,不能放在列表里,压缩成适合列表使用的图。 原生排版就是这样,你做原生app也这样。你觉得webview不会爆那就换成webview。
另外你的图片文件后缀名是jfif,没研究过这种图格式。建议使用常见的图片格式

更多关于uni-app 纯nvue性能优势体现在哪?list下cell 3张图卡到爆!!的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 ,感谢回复!!

不过 list 下 cell 单张图片,就算是4~5MB的图,就算是几十兆的视频组件都是很流畅的,这也是我选择纯NVUE的理由。如果是放 两张图~到3张图就会出现这个帖子的情况,我想应该不是你说原生排版本来就这样,在实际项目中 网络图片并不少用,不一定非得控制图片体积到几十KB,我也相信一定有优化的方案!!

回复 大图APP: 我不知道该咋说,我们内部做产品,列表如果敢用几百k的图,肯定被k

遇到同样的问题,nvue在产品详情页,有些页面非常流畅,有些页面图片不多,卡得一逼,这个问题是否有优化的空间?又或者不是图片大小问题,是图片解析的兼容性导致?

用过的云存储,可以针对图片设置缩略图规则,列表上就可以用这个图

270k的图片都算大图吗???

在nvue中,list组件确实有内存回收机制,但性能问题通常出现在以下几个方面:

  1. 图片加载优化:虽然图片尺寸经过CSS缩放,但原始分辨率770×1080px在列表中大量加载仍会消耗大量内存。建议:

    • 使用webp格式图片
    • 添加lazy-load属性实现懒加载
    • 对图片进行预压缩处理
  2. 列表结构优化:当前代码中cell内嵌套了cell-Vod-Item组件,这种多层嵌套会增加渲染负担。建议简化结构,直接在list中使用cell-Vod-Item。

  3. 图片缓存策略:nvue的image组件默认会缓存图片,大量高清图片会导致内存快速增长。可以:

    • 控制同时加载的图片数量
    • 使用@load事件管理加载队列
  4. 样式优化:避免在列表项中使用复杂的CSS样式和过多的层级嵌套。

具体修改建议:

<template>
    <list ref="list" @loadmore="loadMore">
        <cell v-for="(item,index) in list" :key="index">
            <image class="vod-pic" 
                   :src="my_url_img(item.vod_pic)" 
                   mode="aspectFill"
                   lazy-load>
            </image>
        </cell>
    </list>
</template>
回到顶部