Question

请记住，我之前从未使用过网络工作者，而且在缠绕他们时遇到了一些麻烦。

以下是对我正在做的简化版本的解释。

我的页面包含各种文件的链接 - 一些是文本，一些是图像等。每个文件都有一个显示通用文件图标的图像。

我希望脚本用文件内容的预览替换每个通用图标。

脚本将从服务器请求文件（从而将其添加到缓存中，如预加载器），然后创建画布并在其上绘制预览（图像的缩略图，文本文件的文本摘录，a媒体文件的更具体的图标...）并最终使用数据URL用画布替换通用图标的源。

我可以很容易地做到这一点。但是，我更喜欢在后台使用它，以便它在工作时不会干扰用户界面。

在我深入研究之前，我需要知道：工人是否可以使用画布，如果是这样，我将如何制作画布？我不认为document.createElement('canvas')会起作用，因为工作人员无法访问DOM，或者当我发现所有引用都说他们“无法访问DOM”时我误解了吗？

Answer 1

您无法从网络工作者访问DOM。您无法加载图片。您无法创建画布元素并从Web worker中绘制它们。目前，Web工作者几乎只限于执行ajax调用和执行计算密集型操作。请参阅有关Web工作者和画布对象的相关问题/答案：Web Workers and Canvas以及有关使用Webworkers加速图像处理的文章：http://blogs.msdn.com/b/eternalcoding/archive/2012/09/20/using-web-workers-to-improve-performance-of-image-manipulation.aspx

你最简单的选择是将你的工作分成小块（没有网络工作者）并一次做一个块，做一个setTimeout()，然后处理下一部分工作。这将允许UI在仍然完成工作的同时做出响应。如果要进行任何CPU消耗计算（比如进行图像分析），可以将其归结为Web worker，结果可以通过消息发送回主线程以放入DOM，但如果没有，然后只需用较小的块来完成你的工作就可以保持用户界面的活力。

部分任务（如加载图像，从服务器获取数据等等）也可以异步完成，因此如果正确完成，它也不会干扰UI的响应性。

以下是分块的一般概念：

function doMyWork() {
    // state variables
    // initialize state
    var x, y, z;

    function doChunk() {
        // do a chunk of work
        // updating state variables to represent how much you've done or what remains

        if (more work to do) {
            // schedule the next chunk
            setTimeout(doChunk, 1);
        }

    }
    // start the whole process
    doChunk();
}

Answer 2

Web Workers的另一个（令人沮丧的）限制是它无法访问Chrome上的地理位置。只是我的两分钱。

Answer 3

因此，正如其他人所述，您不能访问DOM，也不能通过Web Worker对DOM进行任何操作。但是，您可以将一些更完整的计算外包给Web Worker。然后，一旦您从主要JS线程内的网络工作者处获得了返回消息，就可以提取所需的值并在其中的DOM上使用它们。

这可能与您的问题无关，但是您提到了画布，所以我将与您分享。

如果您需要改善绘制画布的性能，强烈建议您使用两个画布对象。一个呈现到UI，另一个隐藏。这样，您可以在隐藏的画布上构建所有内容，然后在显示的画布上绘制隐藏的画布。听起来好像并不会做很多事情，但是会大大提高性能。

有关改善画布性能的更多详细信息，请参见此link。

Web工作者的局限性

3 个答案: