2

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.

Improve this question
4
  • Yes, you could. You aren't querying the DOM twice for the same element. In this specific example the difference would probably be negligible though. Commented Dec 11, 2012 at 23:22
  • 1
    $('#div1').css({'background-color': 'red', 'color': 'white'}); is the optimal solution because it's fewer bytes and they'll impact the loading of the JS file far more than the execution difference of the examples you provided. Commented Dec 11, 2012 at 23:23
  • What you're doing here is equational reasoning. You're assuming that the result of the function call $('#div1') doesn't change between those two lines. You can't make those assumptions in an effectful language like JavaScript, and neither will a compiler. Commented Dec 11, 2012 at 23:23
  • This is a simple case wherein , you will be querying the DOM twice in the first case and only once in the second case.. So obviously the second case will be faster where you cache the elements.. If the element is expected to change then you can cache it every time the element is expected to change Commented Dec 11, 2012 at 23:30

3 Answers 3

Reset to default
2

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

0

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'});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.