kcityg kcityg - 3 months ago 6
Javascript Question

Basic javascript flow - in various browsers

I am trying to learn the flow in JavaScript with a very simple JavaScript example but three browsers (Chrome, IE and Firefox) all three are showing different flow patterns and different end results. I know there are cross-browser issues that are to be expected, but this one is super simple. So I am trying to understand how to interpret how JavaScript actually flows.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Test 01</title>
<script type="text/javascript">
document.bgColor = "red";
</script>

</head>

<body bgColor="yellow">

<p>Paragraph 1</p>
<script>alert("after para 1");</script>
<p>Paragraph 2</p>
<script>alert("after para 2");</script>
<p>Paragraph 3</p>
<script>alert("after para 3");</script>

</body>
</html>


What I am seeing is that the "Paragraph 1" text is showing up in Chrome after the alert and so on with the other two alerts also. IE and Firefox seem to be doing the right thing here - showing the text before the alert.

And between IE and Firefox, IE is ending up with a red background and Firefox with yellow. So not sure exactly what to interpret.. behavior is different for all the browsers.

How do you learn about how this is exactly supposed to work?

Edit: removing the var x=10 that is not relevant for this question. And the question is how do you interpret chromes behavior where the alert is showing up before the relevant text - as well as why the bgcolor is being overridden in one case whereas not in others.

Answer

I am trying to learn the flow in JavaScript with a very simple JavaScript example but three browsers (Chrome, IE and Firefox) all three are showing different flow patterns and different end results.

What you are talking about is the HTML engine in different browsers. So this is about processing HTML rather than processing javascript...

How do you learn about how this is exactly supposed to work?

That depends on... I like to create single page javascript applications, which don't load much HTML before the window.onload (or DOMContentLoaded) event fires. So I start with an empty body and build the page completely with javascript. By some of the project you need graceful degradation and you start with a HTML implementing some basic features and you can add javascript to implement more advanced features. By this scenario you need to wait the previously mentioned events if your code wants to do anything with DOM. Otherwise there is no guarantee about which order the browser will render DOM elements and execute javascript commands. So I agree with Diogo Sperb, you have started with a bad practice. Ofc. you can run javascript code before the DOM loads, but those should not involve the DOM. You can do for example XHR requests to the server, or use the history API to override the URI, etc... You can even create DOM elements by using document fragments, but you should not render them. As far as I know rendering DOM elements is sync, so you won't have similar problems after the DOM is loaded.

Just to mention, nobody uses alert() nowadays, we use console.log(), which does not block the page from loading.

Note: I don't understand why people are downvoting your question. I think it is a good javascript beginner question. I guess haters gonna hate. :-)

Comments