Web工作者的局限性

Question

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

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

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

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

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

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

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

Answer 1

您无法从Web工作者访问DOM。您无法加载图片。您无法创建画布元素并从Web worker中绘制它们。目前，Web工作者几乎只限于执行ajax调用和执行计算密集型操作。在web worker和canvas对象上看到这个相关的问题/答案：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的活力。

部分任务，如加载图像，从服务器获取数据等等，也可以异步完成，因此如果正确完成，它不会干扰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工作者对DOM进行任何操作。但是，您可以将一些更完整的计算外包给Web worker。然后，一旦从主JS线程中的Web worker获得返回消息，就可以提取所需的值并在DOM上使用它们。

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

如果你需要提高drawling到canvas的性能，我强烈建议你有两个canvas对象。一个被渲染到UI，另一个被隐藏。这样，您可以在隐藏的画布上构建所有内容，然后在显示的画布上绘制隐藏的画布。它可能听起来不会像它会做多少，但它会显着提高性能。

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