循环调用html-to-image随机卡顿问题排查请求

可能的原因 #

1. Promise未正确终止：你代码中的内层new Promise没有调用resolve()，无论htmlToImage.toBlob成功还是失败，这个Promise都会一直处于pending状态，外层的await会无限等待，表现为程序卡顿。这是代码的明显缺陷。
2. 浏览器资源过载：循环生成300张图片时，频繁的DOM克隆、Canvas绘制会持续占用JS线程和内存，当资源耗尽时，浏览器可能出现无响应的情况，且由于资源占用的随机性，卡顿位置也无规律。
3. html-to-image内部异步阻塞：该库在处理DOM克隆、样式转换或Canvas绘制时，可能遇到某些未处理的边缘情况（如特殊CSS属性、未加载完成的字体、动态内容），导致内部Promise永远pending，既不resolve也不reject。
4. Angular变更检测干扰：在Angular上下文内频繁操作DOM，变更检测机制可能与html-to-image的异步操作冲突，导致线程阻塞。

调试与修复步骤 #

1. 修复Promise未resolve的问题 #

修改generateImage函数，确保在then和catch块中调用resolve()，让Promise正常终止：

async generateImage() {
    await new Promise(async resolve => {
        const node: any = document.getElementById('image-section');
        console.log('generate stats');

        await htmlToImage.toBlob(node)
            .then((dataUrl) => {
                console.log('stats generated');
                // ... 你的处理逻辑
                resolve(); // 调用resolve
            })
            .catch(() => {
                console.log('stats not generated');
                resolve(); // 调用resolve
            });
    });
}

2. 添加超时机制，避免无限等待 #

用Promise.race给htmlToImage.toBlob设置超时，超过指定时间主动终止，防止程序卡住：

async generateImage() {
    await new Promise(async resolve => {
        const node: any = document.getElementById('image-section');
        console.log('generate stats');

        // 5秒超时
        const timeoutPromise = new Promise((_, reject) => 
            setTimeout(() => reject(new Error('生成超时')), 5000)
        );

        Promise.race([htmlToImage.toBlob(node), timeoutPromise])
            .then((dataUrl) => {
                console.log('stats generated');
                // ... 你的处理逻辑
                resolve();
            })
            .catch((err) => {
                console.log('生成失败或超时:', err.message);
                resolve();
            });
    });
}

3. 优化生成流程，避免资源过载 #

• 串行生成：确保前一张图片生成完成并清理资源后，再生成下一张，不要并行触发多个生成请求。比如用for...of循环配合await，而非forEach。
• 清理DOM资源：每次生成完成后，确保临时DOM节点（如果有）被移除，避免内存泄漏。可以在生成后调用URL.revokeObjectURL（如果使用了data URL），或者清理克隆的DOM。

4. 利用浏览器DevTools调试 #

• Performance面板：录制卡顿发生时的性能快照，查看JS线程是否被阻塞，是否有长时间运行的任务，定位具体的阻塞点。
• Memory面板：监控内存使用情况，查看是否有内存泄漏（比如DOM节点持续增加未被回收）。
• Console面板：添加更详细的日志，比如记录每次生成的开始/结束时间、DOM节点的状态（如node.isConnected），以及html-to-image的内部事件（比如使用onClone回调记录克隆过程）：

  htmlToImage.toBlob(node, {
      onClone: (clonedNode) => {
          console.log('DOM克隆完成:', clonedNode);
      }
  })
  

5. 确保DOM状态稳定 #

在Angular中，确保生成图片时DOM已完成更新，避免变更检测干扰：

• 使用NgZone.runOutsideAngular将生成操作移出Angular的变更检测上下文：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone) {}
  
  async generateImage() {
      await this.ngZone.runOutsideAngular(async () => {
          // 你的生成逻辑
      });
  }
  

• 等待Angular变更检测完成后再生成，比如使用await this.changeDetectorRef.detectChanges()（需要注入ChangeDetectorRef）。

内容的提问来源于stack exchange，提问作者Smokovsky