Web Worker 内部的 DOM 操作

Question

我知道工人不能直接操作文档，但是 DOM API 方法呢？他们去哪儿了？！

例如，如果我发出一个接收 HTML 片段的请求，如果只需要解析它以便从特定节点检索一些数据，我应该做什么？！

绝对没有办法在 web worker 上使用虚拟 DOM？！

Answer 1

浏览器支持

DOMParser 或document.implementation 通常用于在浏览器中将 HTML 解析为 DOM。在工作人员上下文中都不可用。

在 Firefox 中，这是不可能的，因为有人决定所有线程都只有一个 DOM 解析器实例。看到这个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=677123

在谷歌浏览器中它也不起作用。

解决方法 - 外部库

没错，由于浏览器开发人员没有意识到 DOM 和 XML 解析将成为 WebWorkers 的主要用途之一，我们将不得不退回到外部库。最好的选择似乎是JSDOM，但你需要弄清楚how to browserify it。

---

这是我对 DOMParser 的失败尝试，我保留它以供将来在此主题上进行实验：https://jsfiddle.net/svaqb2wn/2/

Answer 2

您可以使用在 Web Worker 中运行的 DOM 实现之一：

• Domino
• JSDOM
• XMLDOM
• WorkerDOM
• Via.js

Answer 3

起初，您可能认为解析 XML 的正确方法是 XMLHttpRequest，在 10 个案例中有 9 个是正确的。但是，在当前的 web worker 规范中，我们无权访问 XMLHttpRequest。另一种方法是使用几个流行的 XML 解析库之一：

https://github.com/isaacs/sax-js

http://xmljs.sourceforge.net/index.html 或 https://www.npmjs.com/package/xmljs

HTML 只是 XML，因此您可以用这种方式解析数据。使用上面 npmjs 中的 xmljs 的示例：

var XmlParser = require("xmljs");
var fs = require("fs");


var p = new XmlParser({ strict: true });
var xml = fs.readFileSync("./SOAP1.xml"); // XML in the examples direct 
var xmlNode = p.parseString(xml, function(err, xmlNode) {
    if(err) {
        console.error(err);
        return;
    }
    var nodes = xmlNode.path(["Envelope", "Body", "GetstockpriceResponse", "Price"], true);
    console.log(nodes.map(function(n) { return n.text; }));
});