当前位置：首页 > uni-app

uniapp定时器性能

2026-02-06 15:25:18uni-app

uniapp定时器性能优化方法

在uniapp中使用定时器（如setTimeout、setInterval）时，性能优化需注意以下方面：

合理使用定时器替代方案

动画场景优先使用CSS动画或requestAnimationFrame
数据更新优先使用uniapp的数据绑定机制
长任务考虑使用Web Worker分担主线程压力

优化定时器使用方式

避免高频触发（间隔小于16ms无意义）
及时清除不再需要的定时器（clearTimeout/clearInterval）
页面卸载时必须在onUnload生命周期清除定时器

// 正确示例
let timer = null
export default {
  mounted() {
    timer = setInterval(() => {
      // 业务逻辑
    }, 1000)
  },
  onUnload() {
    clearInterval(timer)
  }
}

性能监控手段

使用Chrome Performance工具分析定时器调用
关注FPS指标是否因定时器出现波动
小程序环境可使用wx.setEnableDebug开启调试

特殊平台注意事项

小程序平台定时器最小间隔为50ms（低于此值会被重置）
APP端Webview与原生定时器存在差异
H5环境注意页面后台运行时的节流处理

高频场景优化方案

倒计时组件实现

// 优化版倒计时
export default {
  data() {
    return {
      count: 60,
      timer: null
    }
  },
  methods: {
    startCount() {
      const startTime = Date.now()
      const endTime = startTime + 60000

      const update = () => {
        const now = Date.now()
        this.count = Math.ceil((endTime - now)/1000)

        if(now < endTime) {
          this.timer = requestAnimationFrame(update)
        }
      }

      update()
    }
  },
  beforeDestroy() {
    cancelAnimationFrame(this.timer)
  }
}

轮询请求优化

采用指数退避算法（Exponential Backoff）
网络恢复后重置轮询间隔
页面不可见时暂停轮询（通过Page Visibility API）

let delay = 1000
const maxDelay = 30000

function fetchWithRetry() {
  fetchData().catch(() => {
    delay = Math.min(delay * 2, maxDelay)
    setTimeout(fetchWithRetry, delay)
  })
}