javascript - Why using "eval" in an unrelated part destroys the performance of the rest of my app on Chrome? -
mind following n-body simulator in javascript:
settimeout(function(){ // returns how many times managed call function in 1 second function bench(f){ (var i=0, t=date.now(); date.now()<t+1000; ++i) f(); return i; }; // buffer of atoms, [a.pos.x, a.pos.y, a.vel.x, a.vel.y, ...] var atoms = []; (var i=0; i<100; ++i) atoms.push(50+math.random()*100, 50+math.random()*100, 0, 0); // compute next frame , render it. setinterval(function(){ main_loop(atoms); render_atoms(ctx,atoms); },1000/60); // problematic line. read below. //eval("(function(a){return a})"); // main loop computes attractive force between each pair of atoms. function main_loop(atoms){ (var i=0; i<atoms.length; i+=4) (var j=0; j<atoms.length; j+=4){ var v0 = atoms[i+0]; var v1 = atoms[i+1]; var v2 = atoms[i+2]; var v3 = atoms[i+3]; var v4 = atoms[j+0]; var v5 = atoms[j+1]; var v6 = atoms[j+2]; var v7 = atoms[j+3]; var v51 = (v5-v1)*(v5-v1); var v40 = (v4-v0)*(v4-v0); var k = math.sqrt(v51+v40*v40)>4 ? math.sqrt(v51+v40) : 4; atoms[j+0] = v4; atoms[j+1] = v5; atoms[j+2] = (v0-v4)/k+v6; atoms[j+3] = (v1-v5)/k+v7; }; (var i=0; i<atoms.length; i+=4){ var v0 = 0.005; var v3 = atoms[i+2]; var v4 = atoms[i+3]; atoms[i+0] = (v3*v0)+atoms[i+0]; atoms[i+1] = (v4*v0)+atoms[i+1]; atoms[i+2] = v3; atoms[i+3] = v4; }; }; // simple circle renderer atoms, nevermind it. var ctx = document.getelementbyid("canvas").getcontext("2d"); function render_atoms(ctx,atoms){ ctx.clearrect(0,0,200,200); (var i=0; i<atoms.length; i+=4){ ctx.beginpath(); ctx.arc(atoms[i],atoms[i+1],1,0,2*math.pi); ctx.stroke(); }; }; // print how many times we're able run main_loop in 1 second. console.log(bench(function(){main_loop(atoms)})); },100);<body> <canvas id="canvas" width=200 height=200></canvas> </body>when click "run" in program, output in console how many times able run main_loop in 1 second. on console, outputs around 6466. now, see identical program:
settimeout(function(){ // returns how many times managed call function in 1 second function bench(f){ (var i=0, t=date.now(); date.now()<t+1000; ++i) f(); return i; }; // buffer of atoms, [a.pos.x, a.pos.y, a.vel.x, a.vel.y, ...] var atoms = []; (var i=0; i<100; ++i) atoms.push(50+math.random()*100, 50+math.random()*100, 0, 0); // compute next frame , render it. setinterval(function(){ main_loop(atoms); render_atoms(ctx,atoms); },1000/60); // problematic line. read below. eval("(function(a){return a})"); // main loop computes attractive force between each pair of atoms. function main_loop(atoms){ (var i=0; i<atoms.length; i+=4) (var j=0; j<atoms.length; j+=4){ var v0 = atoms[i+0]; var v1 = atoms[i+1]; var v2 = atoms[i+2]; var v3 = atoms[i+3]; var v4 = atoms[j+0]; var v5 = atoms[j+1]; var v6 = atoms[j+2]; var v7 = atoms[j+3]; var v51 = (v5-v1)*(v5-v1); var v40 = (v4-v0)*(v4-v0); var k = math.sqrt(v51+v40*v40)>4 ? math.sqrt(v51+v40) : 4; atoms[j+0] = v4; atoms[j+1] = v5; atoms[j+2] = (v0-v4)/k+v6; atoms[j+3] = (v1-v5)/k+v7; }; (var i=0; i<atoms.length; i+=4){ var v0 = 0.005; var v3 = atoms[i+2]; var v4 = atoms[i+3]; atoms[i+0] = (v3*v0)+atoms[i+0]; atoms[i+1] = (v4*v0)+atoms[i+1]; atoms[i+2] = v3; atoms[i+3] = v4; }; }; // simple circle renderer atoms, nevermind it. var ctx = document.getelementbyid("canvas").getcontext("2d"); function render_atoms(ctx,atoms){ ctx.clearrect(0,0,200,200); (var i=0; i<atoms.length; i+=4){ ctx.beginpath(); ctx.arc(atoms[i],atoms[i+1],1,0,2*math.pi); ctx.stroke(); }; }; // print how many times we're able run main_loop in 1 second. console.log(bench(function(){main_loop(atoms)})); },100);<body> <canvas id="canvas" width=200 height=200></canvas> </body>the difference being aded eval("(function(a){return a})") in middle of nowhere. running one, number around 700 on console. in other words, calling eval once caused execution of simulation become 10 times slower forever.
this happening on chrome version 43.0.2357.132 (64-bit), on osx yosemite. doesn't happen on firefox.
why?
Comments
Post a Comment