Javascript MDN web worker是什么；关于螺纹安全“；你想告诉我们什么？_Javascript_Multithreading_Web Worker

Javascript MDN web worker是什么；关于螺纹安全“；你想告诉我们什么？

javascript multithreading

Javascript MDN web worker是什么；关于螺纹安全“；你想告诉我们什么？,javascript,multithreading,web-worker,Javascript,Multithreading,Web Worker,我想在我的代码中使用WebWorker，为了避免微妙的问题，我阅读了MDN的这篇文章。 MDN声明下面的代码是“灾难性的”，所以我猜这些代码会导致一些难以察觉的奇怪行为这些代码旨在创建一个画布，其内容来自web工作者。web worker以60FPS的速度生成图像数据，并将包含图像数据的消息发布到main.js。但MDN并没有解释到底会发生什么问题，所以我不得不猜测由于context.putImageData（imageData）的原因，屏幕不能以60FPS刷新，比如50FPS如果绘制视网膜

我想在我的代码中使用WebWorker，为了避免微妙的问题，我阅读了MDN的这篇文章。 MDN声明下面的代码是“灾难性的”，所以我猜这些代码会导致一些难以察觉的奇怪行为

这些代码旨在创建一个画布，其内容来自web工作者。web worker以60FPS的速度生成图像数据，并将包含图像数据的消息发布到main.js。但MDN并没有解释到底会发生什么问题，所以我不得不猜测

由于

context.putImageData（imageData）的原因，屏幕不能以60FPS刷新，比如50FPS如果绘制视网膜屏幕，则需要稍长的时间，web worker发布的消息无法获得及时响应，因此发布的消息将被累积以导致主屏幕锁定或无响应


如果“在主页和工作区之间传递的数据是复制的，而不是共享的”，那么1中的情况是否意味着严重的内存泄漏
。。。需要你的帮助来指出问题
反之亦然，如果代码编写为main.js调用来自web worker的数据，例如postMessage到web worker进行查询，但频率非常高，并且web worker中的算法需要相对较长的时间，无法及时响应main.js，会发生什么
或者我的理解是错误的，代码想要证明的问题是完全不同的
我需要你的帮助。提前谢谢
HTML内容
worker.js内容
//worker.js
window.onmessage=函数（宽度、高度）{
var噪声=函数（x，y，z）{
var p=新数组（512），排列=[151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
对于（var i=0；i<256；i++）p[256+i]=p[i]=置换[i]；
变量X=Math.floor（X）&255，Y=Math.floor（Y）&255，Z=Math.floor（Z）&255；X-=Math.floor（X），Y-=Math.floor（Y），Z-=Math.floor（Z）；
var u=衰减（x），v=衰减（y），w=衰减（z）；
变量A=p[X]+Y，AA=p[A]+Z，AB=p[A+1]+Z，B=p[X+1]+Y，BA=p[B]+Z，BB=p[B+1]+Z；
回报量表（lerp（w，lerp（v，lerp（u，grad（p[AA]，x，y，z）），grad（p[BA]，x-1，y，z）），lerp（u，grad（p[AB]，x，y-1，x，y-1，z）），lerp（v，lerp（u，u，grad（p[AA+1]，x，y，z-1），grad（p[BA+1]，x-1，y，z-1）），lerp（u，grad（p[AB+1]，x[AB+1]，x-1]，z-1]）；
};
函数衰减（t）{返回t*t*t*（t*（t*6-15）+10）；}
函数lerp（t，a，b）{返回a+t*（b-a）；}
函数梯度（散列，x，y，z）{
var h=hash&15；var u=h<8？x:y，v=h<4？y:h==12 | h==14？x:z；
返回（（h&1）==0？u:-u）+（（h&2）==0？v:-v）；
}
函数标度（n）{return（1+n）/2；}
变量长度=宽度*高度；变量canvasnoisedata=新UINT32阵列（长度）；
setTimeout（函数make_noise（）{
var i=长度，z=数学.random（）*1024；
而(我--){
画布噪声数据[i]=噪声（i%宽度+z，i/宽度+z，z）；
}
设置超时（发出噪音，1000/60）；
},1000/60);
setTimeout（函数post_noise（）{
后消息（canvasnoisedata）；
设置超时（post_噪声，1000/60）；
},1000/60);
};
我在该代码中看到的唯一灾难是1。worker中的窗口未定义，2。imageData未定义，3。putIMageData需要3或7个参数，而不仅仅是1@Jaromanda不可能是这样的语法错误。windows是上下文。imageData是一个全局变量，putIMageData的参数可以省略…我只是告诉你firefox抱怨的是：p和workers没有窗口作为全局作用域，worker中的全局作用域是-是的，imageData
是全局的，代码粗疏的示例…firefox compalins关于context.putImageData（imageData）消息中的参数不足，无法浏览RenderingContext2D。putImageData@Jaromanda那么线程安全呢？如果代码在“关于线程安全”的内容中…示例中有许多错误，但我猜它们试图说明如何使用复制而不传输的大数据块重载主进程和工作进程，以及消息端口管道，因为它使用（嵌套）每1/60帧向工作进程/从工作进程推送多条消息设置超时以计算单工噪声数据，而不是简单地在每帧使用一次消息机制（main.post-worker.handle-worker.postreult-main.use，repeat）（这也会导致调用顺序混乱）。
<html>
<head>
    <title>Multithreading Catastrophy</title>
    <style>
        body { margin: 0px; }
        canvas { position: absolute; top: 0; bottom: 0; left: 0; right:0; width: 100%; height: 100%; }
    </style>
    <script src="main.js" async></script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

// main.js
var myworker = new Worker("worker.js"), width=window.innerWidth, height=window.innerHeight, context=document.getElementById('canvas').getContext('2d');
var imagedatatmp=context.createImageData(width,height);

myworker.onmessage = function(data){
    imageData = imagedatatmp.from(data);
};

setTimeout(function draw_canvas() {
    context.putImageData(imageData);
    setTimeout(draw_canvas, 1000/60);
},10);

window.onresize = window.reload; // Quick (to type) n' dirty way to resize;

// worker.js
window.onmessage = function(width, height){
var noise = function(x, y, z) {
    var p = new Array(512), permutation = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
    for (var i = 0;i < 256;i++) p[256 + i] = p[i] = permutation[i];
    var X = Math.floor(x) & 255, Y = Math.floor(y) & 255, Z = Math.floor(z) & 255; x -= Math.floor(x), y -= Math.floor(y), z -= Math.floor(z);
    var u = fade(x), v = fade(y), w = fade(z);
    var A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;
    return scale(lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z)), lerp(u, grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z))), lerp(v, lerp(u, grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1)), lerp(u, grad(p[AB + 1], x, y - 1, z - 1), grad(p[BB + 1], x - 1, y - 1, z - 1)))));
};
  function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
  function lerp(t, a, b) { return a + t * (b - a); }
  function grad(hash, x, y, z) {
    var h = hash & 15; var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
    return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
  }
  function scale(n) { return (1 + n) / 2; }
var length = width*height; var canvasnoisedata=new UInt32Array(length);

setTimeout(function make_noise() {
var i=length, z=Math.random()*1024;
  while ( i-- ) {
      canvasnoisedata[i] = noise(i%width+z,i/width+z,z);
  }
  setTimeout(make_noise, 1000/60);
},1000/60);

setTimeout(function post_noise() {
    postMessage( canvasnoisedata );
    setTimeout(post_noise, 1000/60);
},1000/60);
};