javascript - What does the MDN web worker "About thread safety" example want to tell us? -
i want use web worker in code, , avoid subtle problems, read section of mdn. mdn states code below "of catastrophy", guess codes cause strange behaviors impalpablely.
the codes intends create canvas, content comes web worker. web worker generates image data in 60fps , post message contains image data main.js. mdn doesn't explain problem occur, have guess.
- the screen can't refreshed in 60fps, if 50fps, because of
context.putimagedata(imagedata);takes little longer time if drawing retina screen, posted message web worker cannot in time response, posted message accumulated cause main screen locking or no response? - if "data passed between main page , workers copied, not shared.", situation in 1 means serious memory leak?
- ... needs point problems.
vise versa, if code written main.js calls data web worker, example postmessage web worker query, in high frequency, , algorithm in web worker take relatively long time, cannot response in time main.js, happen?
or understanding wrong, problems codes want demonstrate totally different.
needs help. in advance.
html content
<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 content
// 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 resize; worker.js content
// 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]; (var = 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 = 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 + 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); };
Comments
Post a Comment