HTML5中利用Worker执行Markdown到HTML的异步转换-H5教程-PHP中文网

可直接用 Web Worker 在后台线程中完成 Markdown 到 HTML 转换，避免阻塞主线程；需选用无 DOM 依赖的解析器（如 marked、markdown-it），配置 sanitize 防 XSS，并复用 Worker 实例提升性能。
可以直接用 Web Worker 在后台线程中完成 Markdown 到 HTML 的转换，避免阻塞主线程，尤其适合处理长文档或实时预览场景。
选择轻量、纯 JS 的 Markdown 解析器
Worker 中不能使用 DOM API，所以必须选不依赖浏览器环境的解析器，比如 marked（v4+ 默认支持 ESM 且无 DOM 依赖）、markdown-it 或 commonmark。避免使用依赖 window<https:>、<code>document<https:> 或样式渲染的库（如某些带高亮https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712TOC 的封装版）。<https:><ul><li>推荐 marked：体积小、配置简洁、支持扩展语法（如 GFM 表格、任务列表）<https:><li>安装时用 <code>npm install marked<https:>，然后通过 <code>importScripts<https:> 或 ES Module Worker 加载<https:><li>若用 Vitehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Webpack 等构建工具，可直接 <code>import marked from 'marked'<https:>（需启用模块化 Worker 支持）<https:><https:><h3>创建并通信 Worker 实例<https:>主线程中初始化 Worker，传入 Markdown 文本，接收转换后的 HTML 字符串：<https:><ul><li>新建 <code>markdown.worker.js<https:>，顶部用 <code>self.onmessage = ({ data }) => { ... }<https:> 接收消息<https:><li>在 worker 内调用 <code>marked(data.mdText)<https:>，再用 <code>self.postMessage({ html: result })<https:> 返回<https:><li>主线程用 <code>const worker = new Worker('.https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712markdown.worker.js', { type: 'module' })<https:>（模块模式更推荐）<https:><li>发送时注意结构清晰，例如：<code>worker.postMessage({ mdText: '# Hello\n\n- a\n- b' })<https:><https:><https:><h3>安全与性能注意事项<https:>Worker 虽隔离执行，但输出的 HTML 仍需谨慎注入页面：<https:><ul><li>默认关闭 HTML 解析（<code>marked.setOptions({ sanitize: true })<https:>），防止 XSS；如需保留部分标签（如 <code><img><https:>），配合 <code>allowedTags<https:> 和 <code>allowedAttributes<https:> 白名单控制<https:><li>对超长文本做节流或分块处理（例如监听输入时加 300ms 防抖），避免频繁创建https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712销毁 Worker 或堆积任务<https:><li>可复用同一 Worker 实例，多次 <code>postMessage<https:> 即可，无需每次新建<https:><https:><h3>简单示例：模块化 Worker（现代写法）<https:>markdown.worker.js<https:><https:><pre class="brush:php;toolbar:false;">import marked from 'marked'; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 配置为安全默认 marked.setOptions({ gfm: true, breaks: true, sanitize: true, });<https:>self.onmessage = ({ data }) => { try { const html = marked(data.mdText || ''); self.postMessage({ html }); } catch (err) { self.postMessage({ error: err.message }); } };<https:><https:>主线程中调用<https:><https:><pre class="brush:php;toolbar:false;">const worker = new Worker('.https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712markdown.worker.js', { type: 'module' }); worker.onmessage = ({ data }) => { if (data.error) console.warn('Markdown parse error:', data.error); else document.getElementById('preview').innerHTML = data.html; };<https:>worker.postmessage({ mdtext: '# test\n\nbold<https:> and <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">link<https:>' });<https:><https:></https:></https:></https:></a></https:></https:></pre></https:></https:></https:></https:></https:></pre></https:></https:></https:> </h3></https:></https:></https:>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！