Is Javascript parsed/interpreted on load? (IE)

Question

I Know, for instance, that when Chrome downloads a Javascript file, it is interpreted and JITed.

My question is, when IE6,7,8, first download a Javascript file, is the entire thing parsed and interpreted?

My understanding was that only top level function signatures and anything executed in the global scope was parsed on load. And then function bodies and the rest were parsed on execution.

If they are fully parsed on load, what do you think the time savings would be on deferring the function bodies to be downloaded and parsed later?

Answer 1

They are fully parsed on load. (IE has to parse the script to know where each function body ends, of course.) In the open-source implementations, every function is compiled to bytecode or even to machine code at the same time, and I imagine IE works the same way.

If you have a page that's actually loading too slowly, and you can defer loading 100K of script that you're probably not going to use, it might help your load times.

(Trivia: JS benchmarks like Sunspider generally do not measure the time it takes to parse and compile the code.)

Answer 2

Yes, on all browsers the downloading of the resource blocks everything else on the page (CSS downloading, other JS downloading, rendering) if done with a <script> tag.

If you're loading all the javascript at the beginning or throughout your page you will see hiccups as a request is about 50ms and the parsing for a library file or something similar could be more than 100ms. 100ms is used as the standard for which anything greater will be noticed as "lag" by the user.

The time savings may be negligible, but the slight loss of user experience if there are pauses when your page is loading may be significant depending on your situation.

See LABjs' site for a lot of articles and great explanations on the benefits of deferring loading and parsing.

Answer 3

Because defining a function is actually an operation, yes, your entire javascript file is parsed, and all of the top-level operations are interpreted. The code inside of your functions is not actually executed until it's called, but it is parsed.

for example:

var i=0;
var print = function( a ) {
  document.getElementById( 'foo' ).innerHtml = a;
}

Everything gets parsed in the above example, and lines 1 and 2 get executed. However, line 3 doesn't get executed until it's called.

There are little "perceptual games" you can play with your users, like putting the script tags at the bottom of the HTML instead of at the top, so that the browser will render the top of the page before it receives the instructions to download and parse the javascript. You could probably also push your function definitions into a document.onload function, so that they don't get executed until after the whole page is loaded and in memory. However, this could cause a "flash of unstyled content" if your javascript is applying visual styles to things (such as jQuery UI stuff).

Answer 4

What do you mean by "downloads"? When it's included with tag, or when it's downloaded through XMLHttpRequest?

If you mean the inclusion by script, then IE interpret all js files at once. Otherwise you will be not able to call functions in that file or see syntax error message.

If you mean download by XMLHttpRequest, then you have to evaluate the content of the file yourself.