请记住,我以前从未使用过网络工作者,而且在缠绕他们时遇到了一些麻烦.
这是对我正在做的简化版本的解释.
我的页面包含各种文件的链接 – 一些是文本,一些是图像等.每个文件都有一个显示通用文件图标的图像.
该脚本将从服务器请求文件(从而将其添加到缓存中,如预加载器),然后创建画布并在其上绘制预览(图像的缩略图,文本文件的摘录,更具体的图标)对于媒体文件…)最后使用数据URL用画布替换通用图标的源.
我很容易做到这一点.但是,我更喜欢在后台使用它,以便它在工作时不会干扰UI.
在我深入研究之前,我需要知道：工人可以使用画布,如果是这样,我将如何制作画布？我不认为document.createElement(‘canvas’)会起作用,因为Workers无法访问DOM,或者我误解了我发现的所有引用都说他们“无法访问DOM”？
解决方法
您无法从Web工作者访问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
你最简单的选择是将你的工作分成小块(没有web工作者)并一次做一个块,做一个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();
}
