uni-app ctx.measureText 高频调用会导致app闪退

uni-app ctx.measureText 高频调用会导致app闪退

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

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

win10

HBuilderX类型：

正式

HBuilderX版本号：

4.66

手机系统：

HarmonyOS NEXT

手机系统版本号：

HarmonyOS 5.0.1

手机厂商：

华为

手机机型：

Mate 60

页面类型：

vue

vue版本：

vue3

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

var ctx = uni.createCanvasContext('myCanvas');  
for(let i = 0; i < 1000; i++){  

    ctx.measureText(i,(res)=>{  
        console.log(res)  
    })  
}

操作步骤：

进入app，执行如下代码

var ctx = uni.createCanvasContext('myCanvas');  
for(let i = 0; i < 1000; i++){  

    ctx.measureText(i,(res)=>{  
        console.log(res)  
    })  
}

预期结果：

正常运行

实际结果：

继续操作app会闪退，特别是继续调用ctx.measureText 时必现

bug描述：

ctx.measureText 高频调用会导致app闪退


更多关于uni-app ctx.measureText 高频调用会导致app闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

频繁调用确实会增加开销，会占用大量内存和线程资源。会导致回调堆积问题 ，每个 measureText 都有一个回调函数，1000 次调用意味着 1000 个回调，容易导致主线程阻塞或内存溢出，从而导致闪退。 建议：

减少调用次数或者分批处理，或者使用节流或者防抖函数控制调用频率 。
如果你需要测量的文本是固定的，可以预先测量并缓存结果 ，避免重复调用

更多关于uni-app ctx.measureText 高频调用会导致app闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我试试

我遇到了同样的问题，我需要在canvas上绘制大概500字左右的文章，需要计算宽度并自动换行，所以计算了每个文字的宽度来相加比较换行，这500字在手机上竟然要渲染3s-4s， h5则是秒绘制，是measureText 在app上被限频了吗

在高频调用 ctx.measureText 时出现应用闪退，主要原因是短时间内大量异步操作导致内存或资源耗尽。measureText 是异步 API，循环中连续调用 1000 次会快速创建大量任务，可能超出系统处理能力，尤其在 HarmonyOS 等移动端环境中。

解决方案：

  1. 降低调用频率：通过分批处理或延迟执行控制调用间隔，例如使用 setTimeout 或分片循环。
  2. 缓存测量结果：对重复文本提前测量并存储，避免重复调用。
  3. 优化代码逻辑：检查是否需实时测量所有文本，若非必要可减少调用次数。

示例修改代码：

const ctx = uni.createCanvasContext('myCanvas');
async function measureTextSafely(textArray) {
  for (let i = 0; i < textArray.length; i++) {
    await new Promise(resolve => setTimeout(resolve, 0));
    ctx.measureText(textArray[i], (res) => {
      console.log(res);
    });
  }
}
// 调用时传入文本数组
measureTextSafely(Array.from({length: 1000}, (_, i) => i.toString()));
回到顶部