Web Worker 中的 DOM 操作

Question

我知道工作人員不能直接操作文檔，但是 DOM API 方法呢？ 他們去哪兒了？！

例如，如果我發出一個接收 HTML 片段的請求，如果只需要解析它以便從特定節點檢索一些數據，我應該怎么做？！

絕對沒有辦法在網絡工作者上使用虛擬 DOM？！

Answer 1

瀏覽器支持

DOMParser或document.implementation通常用於在瀏覽器中將 HTML 解析為 DOM。 在工作環境中兩者都不可用。

在 Firefox 中，這是不可能的，因為有人決定所有線程只有一個 DOM 解析器實例。 看到這個錯誤： https : //bugzilla.mozilla.org/show_bug.cgi?id=677123

在谷歌瀏覽器中它也不起作用。

解決方法 - 外部庫

沒錯，由於瀏覽器開發人員沒有意識到 DOM 和 XML 解析將成為 WebWorkers 的主要用途之一，我們將不得不退回到外部庫。 最好的選擇似乎是JSDOM ，但您需要弄清楚如何瀏覽它。

---

這是我對DOMParser的失敗嘗試，我保留它以備將來關於此主題的實驗： https : //jsfiddle.net/svaqb2wn/2/

Answer 2

您可以使用在 Web Worker 中運行的 DOM 實現之一：

• 骨牌
• JSDOM
• XMLDOM
• 工人DOM
• 通過.js

Answer 3

我剛剛建立了一個解決這個問題的庫。 它基於循環架構，它仍然是WIP，但您可以在此處找到源。

http://github.com/aronallen/-cycle-sandbox/

Answer 4

起初，您可能認為解析 XML 的正確方法是XMLHttpRequest並且在十分之九的情況下您是正確的。 但是，在當前的 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; }));
});