Javascript parsed before html?

Someone please correct me if I'm wrong, but I'd say that each HTML node is parsed in sequence, as it gets downloaded by the browser. If one of those HTML nodes is a <script> element that contains JavaScript (or a reference to an external JavaScript file), then the browser will parse its JavaScript contents before continuing with the remaining HTML nodes.

Premasagar is basically right. I'll elaborate a bit more.

A browser's HTML parser is incremental by nature. Instead of letting the user wait until it downloads the whole HTML page and its additional elements (.js files, images, etc) it will start rendering after it has enough information.

In the case of JavaScript it is divided into two scenarios.

The first, when the JavaScript is simply embedded inside a <script> tag, the browser will download and parse. If it's a function code it will load it into the JavaScript parser engine, and if it's just a code block, it will execute it as soon as it finishes getting the whole <script> block.

The second scenario is when we have an include statement - <script src="..." />. In this case, it will try, as soon as it can, to download and parse the JavaScript file according to the first scenario (loading functions into the JavaScript parser and executing blocks of code outside a function scope).

That is why certain techniques requires you to use some kind of an event so that the JavaScript you wish to execute will be executed when the whole page finishes loading.

Hi Amir,

If you are looking at dynamic text replacement you might want to take a look at SIFR

http://www.mikeindustries.com/sifr/

http://novemberborn.net/sifr/2.0.2

Instead of images, text is replaced by dynamic, client side flash.

In dynamic replacement, some code is executed when you want, usually on onload event on in the end of the loading of html. This code replaces the elements you choose with others, similarly to how you have described it.

 Arik

don't confuse parse with compilation with evaluate or render.

parsing is straight top to bottom. and that was the question,so that is the answer.

rendering is incremental when each node of the html is ready to be rendered! (img iframes...)

javascript is 'compiled' after the <script> node is parsed, and then evaluated, this may be way before the dom is ready! some parts are not ready at load time!

in javascript this can be seen when you determine an image size before the image is loaded.

mainline code in the <script> doesn't have access to the entire dom, because it was not yet rendered.

I use jquery (http://jquery.com) where the ready state of the dom is separated from the parse/compile/evaluate time!

Well, that's probably more info than you needed, but the order of evaluation on an html page makes a big difference for serious sites!