- notes from Free Udacity Course Browser Rendering
- JavaScript Optimisations
Just In Time Compilers.
The code that you write, isn't actually the code that is run. The Just-In-Time Compiler decides how best to compile that JS to (presumably some machine/byte) code.
// use irhydra https://mrale.ph/irhydra/2.bak/for (let index = 0, sum=0; index < array.length; index++) sum+= var.foo(i);return sum;
Micro optimisations within JS are totally unreliable. There's no way to know ahead of time what JIT engine is compiling the JS.
// How will the JavaScript Engine treat these?for(var=i=0; i<len; i++>){}||for(++i <len){}// We cannot know ahead of the client...
requestAnimationFrame
requestAnimationFrame runs at the first available moment of each frame.
let framesPerSecond = 1000/60let browserOverheadHouseKeeping=6;(framesPerSecond-browserOverheadHouseKeeping)=10;//ms
Keep JS to 3-4ms at max. This browser also has to do other pixel pipeline calculation. IE Style, Layout, Paint, Composite...
JS->Style->Layout->Paint->Composite
// In the time before requestAnimationFrame...setTimeout(() => console.log("Bang!"), 100) && setInterval(() => stopHittingYourself(), 100);/** * The problem with both functions is that the JS engine pays zero attention to the rendering pipeline when scheduling these. * they're good functions to use when you want to wait some time to elapse || * do some repeated task every so often * * They're not good for animation or time-sensitive tracking */function animate() { // do something here requestAnimationFrame(animate);}//requestAnimationFrame(animate);