RadiobuttonWithForm场景下HTML2Canvas+jsPDF浏览器卡顿问题求助

问题背景 #

在RadiobuttonWithForm场景下，使用HTML2Canvas将DOM元素转为图片后通过jsPDF生成PDF，当前代码会为每张图片创建多个HTML2Canvas实例，导致浏览器主线程卡顿甚至报错。

已尝试方案 #

遍历目标div元素，用HTML2Canvas捕获图片后添加到PDF，尝试通过Promise.all并行处理异步转换，但卡顿问题仍存在。

预期与实际结果 #

• 预期：图片异步并行转换并添加到PDF，不阻塞浏览器主线程，流畅生成PDF
• 实际：Promise.all并行处理仍导致浏览器卡顿，大量HTML2Canvas实例阻塞主线程，PDF生成不顺畅

优化方案 #

1. 限制并发数量，避免一次性占用主线程 #

并行处理的核心问题是同时启动大量HTML2Canvas渲染任务，直接占满主线程资源。改为批量串行处理（比如每次仅处理2-3个实例），给主线程留出处理用户交互的空间。

示例代码（替换原RadiobuttonWithForm分支逻辑）：

case "RadiobuttonWithForm":
  const divelement = element.getElementsByTagName("div");
  // 筛选出有效目标元素
  const targetDivs = Array.from(divelement)
    .map(el => el.querySelector(".col-lg-12.espd-divVanilla"))
    .filter(Boolean);
  
  // 定义并发处理数量
  const concurrency = 2;
  let currentIndex = 0;

  // 批量处理函数
  async function processBatch() {
    if (currentIndex >= targetDivs.length) {
      // 所有图片处理完成后再保存PDF
      doc.save("informazioni.pdf");
      return;
    }

    // 截取当前批次的元素
    const batch = targetDivs.slice(currentIndex, currentIndex + concurrency);
    currentIndex += concurrency;

    // 处理当前批次的DOM转图片任务
    await Promise.all(batch.map(async (div) => {
      const canvas = await html2canvas(div, {
        // 优化HTML2Canvas配置
        scale: 1, // 降低缩放比例减少计算量（根据需求调整）
        logging: false, // 关闭日志输出
        useCORS: true,
        imageTimeout: 10000 // 增加图片加载超时时间
      });
      
      // 降低图片质量减少体积
      const imageData = canvas.toDataURL('image/jpeg', 0.8);
      
      // 计算图片在PDF中的尺寸（适配页面宽度）
      const imgWidth = pageWidth - 2 * margin;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;

      // 检查分页，避免内容超出页面
      if (currentY + imgHeight > pageHeight - margin) {
        doc.addPage();
        currentY = margin;
      }

      // 将图片添加到PDF的正确位置
      doc.addImage(imageData, 'JPEG', margin, currentY, imgWidth, imgHeight);
      currentY += imgHeight + adjustspace;
    }));

    // 利用requestIdleCallback让浏览器空闲时处理下一批次
    requestIdleCallback(processBatch);
  }

  // 启动批量处理
  processBatch();
  break;

2. 优化HTML2Canvas渲染负载 #

• 降低图片输出质量：通过toDataURL('image/jpeg', 0.8)压缩图片，平衡质量与体积
• 调整缩放比例：将scale设为1（默认是设备像素比，通常为2），减少渲染像素量
• 跳过不必要元素：通过ignoreElements配置过滤隐藏或不需要渲染的DOM节点

3. 修复重复保存PDF的问题 #

原代码中在Promise.all回调和循环末尾各调用了一次doc.save()，会导致PDF重复生成且可能提前触发保存。需移除循环末尾的doc.save()，仅在所有图片处理完成后执行一次保存。

4. 替代方案参考 #

如果HTML2Canvas的性能瓶颈无法通过上述方法解决，可以考虑：

• 使用pdf-lib替代jsPDF：它的图片处理性能更优，API设计更现代化
• 直接通过PDF库API构建内容：对于结构固定的表单，跳过DOM转图片步骤，直接用PDFAPI绘制文本、矩形等元素
• 尝试OffscreenCanvas：配合Web Worker分离渲染任务（注意兼容性，部分浏览器不支持）

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