7***@qq.com
7***@qq.com
  • 发布:2022-10-13 15:27
  • 更新:2022-10-13 15:32
  • 阅读:296

【报Bug】小程序页面在存在多个自定义组件的情况下,不断切换tab,导致快手小程序和头条小程序内存泄漏

分类:uni-app

产品分类: uniapp/小程序/快手

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

第三方开发者工具版本号: v1.14.2

基础库版本号: 1.42.1

项目创建方式: HBuilderX

示例代码:
<template>  
    <div class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <div class="text-area">  
            <!-- <text class="title">{{title}}</text> -->  
            <div class="tab" :class="{'select': select === 'tab1'}" @click="changeTab('tab1', 100)">tab1</div>  
            <div class="tab" :class="{'select': select === 'tab2'}" @click="changeTab('tab2', 200)">tab2</div>  
        </div>  
        <div class="content-area">  
            <div class="content-item" v-for="(item, index) in tabList" :key="index">  

                <!-- 非组件,纯元素代码,内容和组件一致,测试自定义组件需注释 -->  
                <div class="item-wrapper">  
                    <div class="item" v-for="(it, i) in item" :key="i">  
                        <span>{{it}}</span>  
                    </div>  
                </div>  

                <!-- 自定义组件 测试组件放开下面注释,注释上面元素代码 -->  
                <!-- <demo :tabList="item"></demo> -->  
            </div>  
        </div>  
    </div>  
</template>
<script>  
import demo from './components/demo.vue';  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                tabList: [],  
                select: 'tab1'  
            }  
        },  
        components: {demo},  
        onLoad() {  
            this.setTabList('tab1', 100);  
        },  
        methods: {  

            setTabList(name, length) {  
                let arr = []  
                for(let i = 0; i < 5; i++) {  
                    arr.push(name + i);  
                }  
                for(let i = 0; i < length; i++) {  
                    this.tabList.push(arr);  
                }  
                // console.log(this.tabList, 'zzzzz')  
            },  
            changeTab(name, length) {  
                this.select = name;  
                this.tabList = [];  
                this.setTabList(name, length);  
            }  
        }  
    }  
</script>
<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  
    .tab {  
        font-size: 48rpx;  
        color: #8f8f94;  
    }  

    .tab.select {  
        color: red;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
    .content-area {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤:

HBuildX打开hello项目,在pages/index/index.vue代码中可分别选择自定义组件和原生dom进行编译,然后在快手或头条开发者工具运行项目,不停切换tab,观察performance monitor中js heap size 和 DOM nodes的变化

预期结果:

在自定义组件存在的情况下,tab不断切换,js heap size和DOM nodes增长后会被释放,跟原生dom操作结果一致

实际结果:

在自定义组件存在的情况下,tab不断切换,js heap size和DOM nodes增长后不会被释放,原生dom操作js heap size和DOM nodes增长后会被释放,跟原生dom操作不一致

bug描述:

uniapp代码中for循环插入多个自定义组件时,在tab不断切换的情况下,会导致快手小程序和头条小程序的js heap size和dom nodes不断升高,并且无法释放。

2022-10-13 15:27 负责人:无 分享
已邀请:
7***@qq.com

7***@qq.com (作者)

快手小程序在非自定义组件下,切换tab的图例

该问题目前已经被锁定, 无法添加新回复