复制到剪贴板需要花费大量时间

我有以下代码将 ~25MB 的数据复制到剪贴板：

// star time after populating HTML and Text
const start_time = new Date().getTime();
navigator.clipboard.write([
    new ClipboardItem({
        "text/html": new Blob([html], {
            type: "text/html",
        }),
        "text/plain": new Blob([text], {
            type: "text/plain",
        }),
    }),
]).then(() => {
    // end time after async clipbaord api method is completed
    const end_time = new Date().getTime();
    console.log("writing to clipboard : DONE in", (end_time - start_time) / 1000, "s");
});

而且需要 45 秒！

有没有理由clipboard.write(...)需要这么长时间才能做到？是否有某种关于如何改进这一点的建议，或者这只是不意味着复制大量数据？

这可能是因为它们在将您的 html 附加到剪贴板之前会对其进行清理，因此，例如，如果您的脚本尝试将恶意脚本作为 html 插入，则当用户将其粘贴到内容可编辑元素中时，它不会被执行。

清理 25MB 的 html 确实需要一些时间，但这应该并行完成，并且不会阻塞您的 UI。

不幸的是 StackSnippets 沙盒 iframe 不允许使用 Clipboard API，所以这里是一个故障项目 https://highfalutin-handy-count.glitch.me/您可以在其中看到输入确实已被清理。

故障代码：

btn.onclick = (evt) => {
  const dangerous_content = `<script>alert("I'm bad");<\/script><img src="" onerror="alert('Me too')">`;
  navigator.clipboard.write([
    new ClipboardItem({
      "text/html": new Blob([dangerous_content, "Hey"], { type: "text/html" })
    })
  ]);
};
document.onpaste = (evt) => {
  log.textContent = `raw "text/html" data from paste event: 
${ evt.clipboardData.getData("text/html") }`;
};

Output:

作为富文本：brokenHey
作为原始标记：<meta charset='utf-8'><img src="https://highfalutin-handy-count.glitch.me/" alt="broken">Hey