HTML5中可用Web Worker将XML转JSON以避免主线程阻塞：Worker用DOMParser解析XML，递归构建含标签名、属性、文本及子元素的JSON对象，主线程通过Blob URL创建Worker并通信，处理错误与边界情况后更新UI。
在HTML5中，使用Web Worker处理复杂的XML数据转换为JSON，能避免主线程阻塞，提升页面响应性。核心思路是：将XML解析与结构化转换逻辑移入Worker线程，主线程仅负责发送XML字符串、接收结果并更新UI。
1. 准备可运行的Worker脚本（xml2json-worker.js）
Worker不能直接操作DOM，也不能使用document或window对象，但可以使用DOMParser（现代浏览器支持）解析XML字符串，再递归遍历节点生成标准JSON结构。
- 使用
DOMParser().parseFromString(xmlStr, "text/xml")安全解析XML（注意检查parseError） - 编写轻量级递归函数，将
Element节点转为JS对象：保留标签名（作为key）、属性（attr:{...}）、文本内容（text）、子元素（数组形式） - 通过
self.postMessage()将结果JSON对象传回主线程 - 示例片段：
self.onmessage = function(e) {
const xmlStr = e.data;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, "text/xml");
if (xmlDoc.querySelector("parsererror")) {
self.postMessage({ error: "Invalid XML" });
return;
}
function nodeToObj(node) {
if (node.nodeType !== Node.ELEMENT_NODE) return null;
const obj = {};
obj[node.nodeName] = {};
// 属性
if (node.attributes.length > 0) {
const attrs = {};
for (let i = 0; i < node.attributes.length; i++) {
attrs[node.attributes[i].name] = node.attributes[i].value;
}
obj[node.nodeName].attr = attrs;
}
// 文本内容
const textNodes = Array.from(node.childNodes)
.filter(n => n.nodeType === Node.TEXT_NODE)
.map(n => n.textContent.trim())
.filter(t => t);
if (textNodes.length === 1 && node.children.length === 0) {
obj[node.nodeName].text = textNodes[0];
}
// 子元素
const children = Array.from(node.children);
if (children.length > 0) {
obj[node.nodeName].children = children.map(child => nodeToObj(child)).filter(Boolean);
}
return obj;
}
const result = nodeToObj(xmlDoc.documentElement);
self.postMessage({ data: result });
};
2. 主线程中创建并通信Worker
主线程需动态创建Worker（推荐内联Blob URL方式，避免跨域或部署路径问题），发送XML字符串，并监听返回结果。
- 用
Blob封装Worker代码，再用URL.createObjectURL()生成可执行URL - 调用
worker.postMessage(xmlString)触发转换 - 在
worker.onmessage中接收结果，建议用JSON.stringify(..., null, 2)格式化输出到<pre class="brush:php;toolbar:false;"></code>或控制台</li> <li>记得调用<code>worker.terminate()</code>释放资源（尤其一次性任务）</li> </ul> <H3>3. 处理常见边界情况</H3> <p>真实XML常含命名空间、CDATA、注释、DOCTYPE等，Worker中需有容错设计：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>忽略<code>Comment</code>和<code>DocumentType</code>节点（<code>nodeType !== Node.ELEMENT_NODE</code>时跳过）</li> <li>对含命名空间的XML（如<code><ns:tag></code>），<code>nodeName</code>会带前缀；如需清洗，可用<code>localName</code>替代<code>nodeName</code></li> <li>CDATA节点内容应合并进父元素的<code>text</code>字段，可在遍历时统一收集所有文本节点（包括CDATA）</li> <li>若XML体积大（>10MB），考虑分块解析或流式预处理，但Worker本身不支持流式XML解析，此时建议服务端转换</li> </ul> <H3>4. 完整调用示例（主线程）</H3> <p>以下代码可直接运行于现代浏览器（Chrome/Firefox/Edge）：</p> <font size="2"><pre class="brush:php;toolbar:false;">const workerCode = ` self.onmessage = function(e) { const xmlStr = e.data; const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlStr, "text/xml"); if (xmlDoc.querySelector("parsererror")) { self.postMessage({ error: "XML parse failed" }); return; } function nodeToObj(n) { if (n.nodeType !== Node.ELEMENT_NODE) return null; const o = {[n.nodeName]: {}}; if (n.attributes.length) { o[n.nodeName].attr = {}; for (let a of n.attributes) o[n.nodeName].attr[a.name] = a.value; } const texts = Array.from(n.childNodes) .filter(c => c.nodeType === Node.TEXT_NODE || c.nodeType === Node.CDATA_SECTION_NODE) .map(c => c.textContent.trim()) .filter(t => t).join(" "); if (texts) o[n.nodeName].text = texts; const kids = Array.from(n.children).map(nodeToObj).filter(Boolean); if (kids.length) o[n.nodeName].children = kids; return o; } self.postMessage({ result: nodeToObj(xmlDoc.documentElement) }); }; `; const blob = new Blob([workerCode], { type: "application/javascript" }); const worker = new Worker(URL.createObjectURL(blob)); worker.onmessage = function(e) { if (e.data.error) { console.error("Worker error:", e.data.error); } else { document.getElementById("output").textContent = JSON.stringify(e.data.result, null, 2); } worker.terminate(); // 用完即销 }; // 触发转换（例如点击按钮后） document.getElementById("convertBtn").onclick = () => { const xml = `<root id="1"><item name="a">Hello</item><item name="b"/></root>`; worker.postMessage(xml); };</pre>
