NervJS/taro

setInterval倒计时在真机微信小程序渲染卡顿

Open

#12632 opened on Oct 10, 2022

View on GitHub
 (6 comments) (0 reactions) (1 assignee)TypeScript (37,306 stars) (4,897 forks)batch import
F-vue3P-2T-weappV-3good first issueperf

Description

相关平台

微信小程序

复现仓库

https://github.com/daofeng-coder/taro-interval-bug-test.git 小程序基础库: 2.25.4 使用框架: Vue 3

复现步骤

打开后就一个页面，点击红色按钮即可，需要在真机测试 Taro版本：3.4.13 机型：荣耀X10 系统：鸿蒙2.0

期望结果

期望流畅渲染倒计时

实际结果

在真机微信小程序中渲染卡顿，模拟器、h5中渲染正常

环境信息

 Taro CLI 3.4.13 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.16.0 - D:\Program Files\nodejs\node.EXE
      Yarn: 1.22.19 - D:\sfot-cache\npm\prefix\yarn.CMD
      npm: 8.11.0 - D:\Program Files\nodejs\npm.CMD

补充信息

测试过原生微信小程序代码不会卡顿

Contributor guide

Tech stack
javascripttypescriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of Taro frameworkExperience with WeChat mini programBasic knowledge of Vue 3
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the reproduction repository to understand how setInterval is used in the countdown component. Compare the behavior between simulator and real device, focusing on Taro's runtime for WeChat mini program. Check if the issue is related to Taro's timer handling (e.g., in packages/taro weapp) or the mini program's rendering cycle. Experiment with using setTimeout recursively or requestAnimationFrame as alternatives. Review comments on the issue for any existing findings.