CODEWITHSUNDEEP
javascript
Matt
Matt

Reputation: 27001

Learning how JavaScript optimizes execution, if at all

Is there a way to learn at how JavaScript is interpreted and executed? In .NET or JAVA for instance, you could look at the generated byte code, in C you could look at the generated assembly instruction but from what I gather, JavaScript is interpreted line by line and then it varies on the JS engine in different browsers.

Still is there a way to learn how JavaScript does this? Does the interpreter in modern browsers tend to look ahead and optimize as a compiler might?

For instance, if I did:

$('#div1').css('background-color','red');
$('#div1').css('color','white');

Could I have a perf gain by doing:

var x = $('#div1');
x.css('background-color','red');
x.css('color','white');

The point of this question is to get some information how one might gain some insight as to how JavaScript is run in the browser.

Upvotes: 2

Views: 54

Answers (3)

Alex
Alex

Reputation: 1087

V8 does some amazing things internally. It compiles to machine code and creates hidden classes for your objects. Mind-blowing details here: https://developers.google.com/v8/design

Ofcourse when it comes to the DOM, performing lookups can only go that fast. Which is why chaining or temp variables can make a difference, especially in loops and during animations.

Besides that, using the right selectors can be helpful. #id lookups are undoubtedly the fastest. Simple tagname or class lookups are reasonably fast as well. jQuery selectors like :not can't fall back on builtins and are considerably slower.

Besides reducing lookups, another good rule of thumb with the DOM is: If you need to do a lot of DOM manipulation, take out some parent node, do the manipulations, and reinsert it. This could save a whole lot of reflows/repaints.

Upvotes: 1

Bergi
Bergi

Reputation: 665380

Yes, you will get a performance gain. The DOM is not queried twice, and only one jQuery object is instantiated.

Yet you should not do this for performance (the gain will be negligible), but for code quality. Also, you do not need a variable, jQuery supports chaining:

$('#div1').css('background-color','red').css('color','white');

and the .css method also can take an object:

$('#div1').css({'background-color': 'red', 'color': 'white'});

Upvotes: 0

Matt
Matt

Reputation: 10564

The optimization steps taken, as always, depend on the compiler. I know that SpiderMonkey is fairly well documented, open source, and I believe does JIT compilation. You can use it outside of the browser to tinker with, so that's one less black-box to deal with when experimenting. I'm not sure if there's any way to dump the compiled code as it runs to see how it optimizes in your code, but since there's no standard concept of an intermediate representation of Javascript (like there is with .NET/Java bytecode) it would be specific to the engine anyway.

EDIT: With some more research, it does seem that you can get SpiderMonkey to dump its bytecode. Note, however that optimizations can take place both in the interpreter that generates the bytecode and the JIT compiler that consumes/compiles/executes the bytecode, so you are only halfway there to understanding any optimizations that may occur (as is true with Java and .NET bytecodes).

Upvotes: 2

Related Questions