html - Web Worker 的局限性

Question

请记住，我以前从未使用过 Web Workers，但我在理解它们时遇到了一些麻烦。

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

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

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

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

我可以很轻松地做到这一点。但是，我更愿意将它放在后台，这样它在工作时就不会干扰 UI。

在我深入探讨之前，我需要知道:Workers 可以使用 Canvas 吗？如果可以，我将如何创建 Canvas ？我不认为 document.createElement('canvas') 会起作用，因为 Workers 无法访问 DOM，或者当我发现的所有引用资料都说他们“无法访问”时，我是否误解了DOM”？

Answer 1

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

您最简单的选择是将您的工作分成小块(没有 web worker)并且一次做一个 block ，执行一个 setTimeout()，然后处理下一个工作 block 。这将使 UI 能够响应，同时仍能完成您的工作。如果有任何 CPU 消耗计算要做(比如做图像分析)，这可以外包给网络 worker ，结果可以通过消息发送回主线程以放入 DOM，但如果没有，然后将您的工作分小块进行，以保持 UI 的活力。

加载图像、从服务器获取数据等部分任务也可以异步完成，因此如果操作得当，无论如何都不会干扰 UI 的响应能力。

这里是分 block 的一般概念:

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();
}