Question

我想在我的代码中使用web worker，为了避免细微的问题，我读了MDN的这个section。 MDN声明下面的代码是“灾难性的”，所以我猜这些代码会引起一些奇怪的行为。

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

屏幕无法刷新60FPS，比如50FPS，因为context.putImageData(imageData);如果绘制视网膜屏幕需要更长的时间，来自网络工作者的发布消息无法得到及时响应，所以发布的消息将被累积以导致主屏幕锁定或无响应？
如果“主页和工作人员之间传递的数据被复制，而不是共享。”，1中的情况是否意味着严重的内存泄漏？
......需要你的帮助来指出问题。

反之亦然，如果代码写为main.js从web worker调用数据，例如postMessage到web worker进行查询，但频率非常高，而web worker中的算法需要相对较长的时间，不能及时响应main.js，会发生什么？

或者我的理解是错的，代码想要展示的问题完全不同。

需要你的帮助。提前致谢。

HTML内容

<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内容

// 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内容

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

MDN Web工作者“关于线程安全”示例想告诉我们什么？

0 个答案: