富文本格式化应避免主线程阻塞，优先用Web Worker处理纯计算任务，requestIdleCallback分片执行DOM操作，动态加载编辑器并延迟初始化，集中读写DOM以防止强制同步布局。
富文本格式化（如解析 HTML、渲染样式、高亮关键词、生成预览）容易触发长任务，导致页面卡顿、交互失灵。核心思路是把耗时操作从主线程移出，或拆成小块让浏览器有空隙响应用户操作。
用 Web Worker 处理纯计算型格式化
适合不涉及 DOM 操作的逻辑，比如：HTML 字符串清洗、Markdown 转 HTML、语法高亮词法分析、内容摘要提取等。
- 将格式化函数抽离到单独的
format-worker.js文件中 - 主线程通过
postMessage发送原始内容，Worker 完成后回传结构化结果 - 避免在 Worker 中访问
document、window或任何 DOM API
示例：
主线程：
立即学习“Java免费学习笔记（深入）”；
const worker = new Worker('./format-worker.js');worker.postMessage({ html: '<p>Hello <strong>world</strong></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10666" title="Java Api Extractor"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Java Api Extractor" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10666" title="Java Api Extractor">Java Api Extractor</a>
<p>从 Java 项目中提取 Controller 层接口定义为 JSON 数据。</p>
</div>
<a href="/xiazai/skill10666" title="Java Api Extractor" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>' });worker.onmessage = ({ data }) => { editor.innerHTML = data.formatted; };
用 requestIdleCallback 分片执行 DOM 渲染
当必须操作 DOM（如为富文本节点添加 class、插入图标、绑定事件代理），且内容量大时，可分批处理，利用浏览器空闲时间推进。
- 把待处理节点切分成每批 20–50 个，每次只处理一批
- 用
requestIdleCallback在帧空闲时执行，超时强制提交 - 配合
isConnected校验节点有效性，防止卸载后操作残留节点
示例：
function formatBatch(nodes, index = 0) { const batch = nodes.slice(index, index + 30); batch.forEach(node => { if (node.isConnected && node.querySelector) { node.querySelectorAll('code').forEach(el => el.classList.add('hljs')); } }); if (index + 30 <br><code> requestIdleCallback(() => formatBatch(nodes, index + 30), { timeout: 1000 }); }}
动态加载编辑器 + 延迟初始化格式能力
很多富文本库（如 Quill、Tiptap）自带大量格式解析逻辑。若非首次编辑就需全部启用，会拖慢首屏和初始交互。
- 用
import()动态加载编辑器模块，仅在用户点击「编辑」或聚焦时触发 - 初始化时关闭非必要插件（如 spellcheck、history、table 等），按需启用
- 对只读场景（如文章详情页），直接用轻量解析器（如
dompurify + innerHTML）替代完整编辑器
避免强制同步布局干扰格式流程
富文本格式化过程中若混入 offsetHeight、getBoundingClientRect 等读取布局的操作，会打断浏览器优化，引发隐式重排，放大卡顿。
- 所有 DOM 读取集中到格式化前一次性完成（如缓存容器尺寸、字号、行高）
- 所有 DOM 写入集中在后续批量进行（如用
DocumentFragment插入节点） - 禁用实时监听
resize或scroll触发格式重算，改用节流或显式触发
