HTML复制本身不拖慢性能，但兼容性差：navigator.clipboard.write()需多MIME类型支持，Firefox不支持，iOS Safari和微信仅认text/plain；卡顿主因是DOM操作或异步等待，非复制API本身。
不会拖慢，但 HTML 复制和“一键复制”不是同一层机制，强行混用反而容易出错。
HTML 复制本质是 document.execCommand('copy') 或 navigator.clipboard.writeText()
浏览器原生复制 API 本身不解析 HTML，它只处理纯文本或（极少数情况下）富文本片段。当你调用 navigator.clipboard.writeText('hello')
- 实际写入剪贴板的是字符串
hello，不是加粗效果 - 想粘贴成带样式的 HTML，必须用
navigator.clipboard.write()+new ClipboardItem()，且目标应用（如 Word、Notes）要支持 HTML 类型 -
document.execCommand('copy')已废弃，不推荐新项目使用，尤其在 Safari 和新版 Chrome 中行为不稳定
“一键复制”按钮卡顿，大概率不是 HTML 导致，而是 DOM 操作或异步等待
常见卡顿点不在复制本身，而在触发前的准备逻辑：
- 从
contenteditable区域或iframe里提取 HTML 内容时，若节点过多，innerHTML序列化可能阻塞主线程 - 用了
getSelection().getRangeAt(0).cloneContents()后再转 HTML，未做节流或异步处理 - 复制后立即执行高开销操作（如重绘、发送埋点、更新 UI 状态），让用户感知为“复制变慢”
- 未 catch
navigator.clipboard.write()的拒绝错误（如页面非安全上下文、用户未交互过），导致 Promise 悬停或静默失败
协同使用 HTML 和纯文本复制，得靠 ClipboardItem 多类型写入
真正实现“粘贴到微信是纯文本，粘贴到 Notion 是带格式 HTML”，需要同时提供多个 MIME 类型：
const html = '<strong>Hello</strong> world';
const text = 'Hello world';
navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([html], {type: 'text/html'}),
'text/plain': new Blob([text], {type: 'text/plain'})
})
]);
但要注意：
- Firefox 目前不支持
ClipboardItem（截至 v128），降级必须 fallback 到writeText() - 移动端 Safari 对
text/html支持极弱，基本只认text/plain - 微信内置浏览器完全忽略 HTML 类型，永远只读取
text/plain
HTML 复制不是性能瓶颈，但它是兼容性陷阱最密集的区域——写的时候看着能跑，一换环境就退化成乱码或纯标签。别为了“看起来高级”而引入 ClipboardItem，先确认你的核心用户在哪粘贴、粘贴到什么软件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
