Question

我想从Web Worker中的HTML字符串中提取数据。

我想澄清我不想操纵DOM 。我正在向Web Worker发送一个HTML字符串，然后它应该从HTML中提取数据，然后返回提取的数据。

在浏览器中，我可以这样做：

  var html = $("<body><div>...more html...</div></body>");

  var extractedText = $(".selector", html).text();

我的问题：

如果给出相同的HTML字符串，那么Web Worker环境中上述代码的等价物是什么？在Web Worker等中没有jQuery，没有DOMParser，没有querySelector ..还有其他选择吗？

为什么：

我正在浏览浏览器中的页面，并且不想阻止UI线程，因为它的工作非常繁重。

我已经看过jsdom，cheerio等，但却无法弄清楚如何让它们发挥作用。

关于建议的重复项：

我已经审核了两个建议的重复项，它们是我在搜索此问题的答案之前已阅读过的重复项。它们解决了XML解析而不是HTML解析，也没有解决如何在Web Workers中使用CSS选择。

Answer 1

简短回答：

您不能在Web worker中进行任何类型的HTML / CSS操作，包括查询。

答案很长：

有很多DOM。有一个主要的DOM，它在页面上呈现，但浏览器所做的一切都涉及HTML或XML树，包括querySelector和朋友，需要浏览器为该树构建一个DOM。（另见：DocumentFragment）

Mozilla的一位开发人员谈到了他们无法在工作线程上构建任何DOM的一些原因（在this question上通过nabble找到）：

您假设DOM实现代码中没有一个使用任何类型的非DOM对象，或者如果这些对象完全是线程安全的话。事实并非如此，至少在Gecko。

在这种情况下的问题不是在多个线程上触及的DOM对象。问题是不同线程上的两个DOM对象都触及了一些全局第三个对象。

例如，XML解析器必须做一些Gecko只能在主线程上完成的事情（DTD加载，随意;还有一些我之前见过但不记得的其他东西）。

因此。我们显然不能使用querySelector，createElement或者在worker中有用的任何东西，那么我们能做些什么呢？

当然，构建我们自己的DOM解析器/选择器模块！

不是真的。尝试在您的工作人员中加入htmlparser2的副本，也许可以通过browserify（使这项工作成为自己的问题）。有了它，并且CSSselect允许querySelector - 就像选择一样，你应该准备好了。

诚然，你不能使用jQuery，但是对于简单的查询需求，他们（以及querySelector / querySelectorAll）应该绰绰有余。

Answer 2

您可以在worker内部进行dom选择，但您需要创建一个API，该API将使用发布消息在主踏步和worker之间更改数据（因为您不能直接在worker中使用DOM）。局限性在于您将需要在它们之间传递字符串，因此您将无法返回Dom节点，除非您有一些代码可以根据主脚踏区的数据在worker中创建DOM节点。

由于JavaScript是动态的，因此创建动态包装程序应该很容易，该包装程序将为您创建所有这些功能，并允许调用querySelelector('.foo')并公开所有Dom API。使用代理对象，您甚至可以允许工人使用正确的代码使用querySelelector('.foo').innerHTML = 'hello';。

有一个库可以使Google Comlink的API的创建更加轻松。如果您不想使用库，则可以检查此代码，该git Web终端使用类似RPC的代码向工作人员公开同构git函数（受Jason's Miller的启发 workerize）。

创建工人： https://github.com/jcubic/git/blob/gh-pages/js/main.js#L116
工人代码 https://github.com/jcubic/git/blob/gh-pages/js/git-worker.js

快速搜索使该项目看起来很有前途"Worker DOM"，它应该为您提供worker中的DOM api（我几乎可以肯定使用我提出的解决方案），但是我没有检查它，并且我没有确定如何运作。

通过一些工作，您甚至可以在worker中使用jQuery，这将是开源项目的好项目。

Web Workers中的CSS选择？

2 个答案: