微信小程序鸿蒙环境，状态更新时长显著长于android/ios

[sdjalft]

请先确认

• 我已搜索并确定这个提交不是重复的

Taro 版本

v4

相关领域

性能问题

使用框架

React

相关平台

• 所有平台
• Web 端（H5）
• 移动端（React-Native）
• 鸿蒙（Harmony）
• 鸿蒙容器（Harmony Hybrid）
• ASCF 元服务
• 快应用（QuickApp）
• 所有小程序
• 微信小程序
• 企业微信小程序
• 京东小程序
• 百度小程序
• 支付宝小程序
• 支付宝 IOT 小程序
• 头条小程序
• QQ 小程序
• 钉钉小程序
• 飞书小程序
• 快手小程序

小程序基础库版本

No response

问题描述

我在使用taro4.0.9版本，发现鸿蒙环境中的微信小程序更新效率非常差，会导致应用出现显著卡顿。安卓、ios不存在这个问题。以下为测试代码：

// 本文件旨在测试小程序快速高频次批量更新的卡顿情况。其中会对比是否使用compileMode的差距

import { View, Text, Image } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.less'

const Card = (props) => {
  const { prefix, index } = props;

// 暂且不用compileMode，测试性能
  return <View key={prefix + index} className='item'>
    <Text>{prefix + index + ''}</Text>
    <Image src='https://cbu01.alicdn.com/img/ibank/O1CN01Yws3Nb2EBP2HYmrJZ_!!2214356698706-0-cib.jpg' />
    <Image src='https://cbu01.alicdn.com/img/ibank/O1CN01QtHWdO2IS7ywHzHfh_!!3420749284-0-cib.jpg' />
  </View>
}

export default function Index () {
  const [prefixCount, setPrefixCount] = useState(0);

  useEffect(() => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    currentPage.setUpdatePerformanceListener({withDataPaths: true}, (res) => {
      console.log(`waitTime: ${res.updateStartTimestamp - res.pendingStartTimestamp}, updateTime: ${res.updateEndTimestamp - res.updateStartTimestamp}`);
    });

    const timer = setInterval(() => {
      setPrefixCount(prev => {
        if (prev > 20) {
          clearInterval(timer);
        }
        return prev + 1;
      });
    }, 50);
  }, []);

  return (
    <View className='index'>
      {Array.from({ length: 100 }).map((_, index) => (
        <Card key={prefixCount + index} prefix={prefixCount} index={index} />
      ))}
    </View>
  )
}

上述代码在华为Nova14、小米6两台手机上同时测试，发现Nova14的updateTime慢与Mi6。目前不确定原因是什么

复现链接

上述代码

复现步骤

使用鸿蒙、安卓分别运行上述代码即可复现

环境信息

👽 Taro v4.0.9


  Taro CLI 4.0.9 environment info:
    System:
      OS: macOS 14.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.12.0 - /Users/sdjalft/.nvm/versions/node/v18.12.0/bin/node
      Yarn: 1.22.22 - /Users/sdjalft/.nvm/versions/node/v18.12.0/bin/yarn
      npm: 8.19.2 - /Users/sdjalft/.nvm/versions/node/v18.12.0/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.9 => 4.0.9 
      @tarojs/components: 4.0.9 => 4.0.9 
      @tarojs/helper: 4.0.9 => 4.0.9 
      @tarojs/plugin-framework-react: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-alipay: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-h5: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-harmony-hybrid: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-jd: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-qq: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-swan: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-tt: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-weapp: 4.0.9 => 4.0.9 
      @tarojs/react: 4.0.9 => 4.0.9 
      @tarojs/runtime: 4.0.9 => 4.0.9 
      @tarojs/shared: 4.0.9 => 4.0.9 
      @tarojs/taro: 4.0.9 => 4.0.9 
      @tarojs/taro-loader: 4.0.9 => 4.0.9 
      @tarojs/webpack5-runner: 4.0.9 => 4.0.9 
      babel-preset-taro: 4.0.9 => 4.0.9 
      eslint-config-taro: 4.0.9 => 4.0.9 
      react: ^18.0.0 => 18.3.1

开源贡献

• 我愿意修复这个错误。请参考 (贡献指南)