Question

177

When does the browser execute Javascript? How does the execution cursor move?

rated 0 times [ 181] [ 4] / answers: 1 / hits: 43189 / 15 Years ago, fri, february 26, 2010, 12:00:00

I was wondering if there are any available resources that describe how a browser's cursor executes Javascript.

I know it loads and executes tags when a page loads, and that you can attach functions to various window events, but where things get fuzzy is when, for instance, I retrieve a remote page via AJAX and put its contents into a div.

If that remote page has got to load script libraries such as <script src=anotherscript.js />, when is anotherscript.js being loaded and its contents are being executed?

What happens if I included anotherscript.js on my current page, and then I load some remote content which has a duplicate include of this script? Does it overwrite the original one? What if the original anotherscript.js has a var in it whose value I altered, and then I reload that file... do I lose the original value or is the second inclusion of this script ignored?

If I load some procedural Javascript via AJAX, when is it executed? Immediately after I do mydiv.innerHTML(remoteContent)? Or is it executed before that?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 15 Years ago addie · Accepted Answer

The answer varies depending on where the script tag is and how you've added it:

Script tags inline with your markup are executed synchronously with the browser's processing of that markup (except, see #2), and so if -- for instance -- those tags reference external files, they tend to slow down the processing of the page. (This is so the browser can handle document.write statements, which change the markup they're processing.)

Script tags with the defer attribute may, on some browsers, not be executed until after the DOM has been fully rendered. Naturally these can't use document.write. (Similarly there's an async attribute that makes the script asynchronous, but I don't know much about it or how well it's supported; details.)

Script tags in content you assign to elements after DOM load (via innerHTML and similar) are not executed at all, barring your use of a library like jQuery or Prototype to do it for you. (With one exception pointed out by Andy E: On IE, if they have a defer attribute, it will execute them. Doesn't work in other browsers.)

If you append an actual script element to the document via Element#appendChild, the browser begins downloading that script immediately and will execute it as soon as the download is finished. Scripts added this way are not executed synchronously or necessarily in order. First appending a <script type=text/javascript src=MyFct.js></script>, and then appending <script type=text/javascript>myFunction();</script> may well execute the inline (second) one before the remote (first) one. If that happens and MyFct.js declares myFunction(), it will not be defined when we try to use it with the inline script. If you need things done in order, you can tell when a remote script has been loaded by watching the load and readyStateChange events on the script element you add (load is the event on most browsers, readyStateChange on some versions of IE, and some browsers do both, so you have to handle multiple notifications for the same script).

Script inside event handlers on attributes (<a href='#' onclick='myNiftyJavaScript();'>) rather than in a script tag is executed when the relevant event occurs.

I was working away at my Real Job and suddenly my hindbrain said You know, you've been told they won't be executed if you assign them to innerHTML, but have you personally checked? And I hadn't, so I did -- FWIW:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=Content-type content=text/html;charset=UTF-8>

<title>Script Test Page</title>

<style type='text/css'>

body {

    font-family: sans-serif;

}

</style>

<script type='text/javascript'>

function addScript()

{

    var str, div;



    div = document.getElementById('target');

    str = Content added< + script type='text/javascript'>alert('hi there')< + / + script>;

    alert(About to add: + str);

    div.innerHTML = str;

    alert(Done adding script);

}

</script>

</head>

<body><div>

<input type='button' value='Go' onclick='addScript();'>

<div id='target'></div>

</div></body>

</html>

The alert from the script doesn't appear on IE7, FF3.6, or Chrome4 (I haven't bothered to check others, I'm meant to be working :-) ). Whereas if you append elements as shown here, the script gets executed.