0

I have a page for registration, and some of the JS is only for this page, and the other JS is for 3 different pages. So, the JS for this page only I have written inside tags, and the second in and external file, which was included in the body tag

Code example

HTML
...
<script type="text/javascript" scr="src.js"></script>
<script type="text/javascript">
//some JS and jQuery code
</script>

In which order does the browser load the web page? If it is reading HTML, when it finds first script does it load this script, wait until it is completely loaded and then continue reading HTML?

Because in the internal JS I use some functions from external an script such as jQuery $(document).ready() function, and I want to know, if this event is triggered when DOM is ready, so this means the function is external JavaScript?

John Conde
  • 217,595
  • 99
  • 455
  • 496
Arxeiss
  • 976
  • 16
  • 34
  • 1
    Don't take this with any attitude because none is implied, but couldn't you just try this and see what happens? – j08691 Aug 14 '12 at 16:38
  • @j08691: I think he's wondering if it's actually enforced or if that just happens to be the behavior he's getting in his particular browser right now. – DaoWen Aug 14 '12 at 16:39

6 Answers6

6

Mordern browsers, when read to an external tag (one with src attribute), would download this script asynchronously, that is, continue reading / parsing HTML when the script it being downloaded.

However, browser would block all following script's execution (note not download), think of an script execution queue, all scripts would enqueue and executed one by one, but download is async.

Earilier browsers (mostly IE6 and IE7) is different, they would block the HTML parsing process, wait for script to be downloaded and executed, and continue to parse remaining HTML.

To sum up: download and execute are different stage of a script, mordern browsers blocks execute stage, download could be async and parallel to boost up performance, earlier browsers blocks download stage which makes page parsing less efficient.

otakustay
  • 11,817
  • 4
  • 39
  • 43
  • Thank you. I need explain it that way. So in inline JS in HTML I can use function etc. from external, because it will be executed after executing external (in my case because external is above). Thank you very much – Arxeiss Aug 14 '12 at 17:17
1

wait until he isn't completely loaded and continue reading HTML

This is not how it works, the page is loaded asynchronously.

in internal JS I use some functions from external script, and in internal script is jQuery $(document).ready() function, and I want to know, if this event is triggered, when DOM is ready, so this mean even external JavaScript?

When calls are attached to the document ready event, they are attached in a queue in the order they are added and are then called in that order.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • 1
    While its true there is asynchronous loading, when a browser sees a script tag it does stop loading other things until the javascript is downloaded that is why having as much script included at the foot of your page, instead of the top, gives performance increases in terms of the visitor seeing your content quicker. See: http://stackoverflow.com/questions/11786915/javascript-on-the-bottom-of-the-page –  Aug 14 '12 at 16:40
1

Whenever it gets to a script tag, the browser will stop loading other content until it is interpreted. This means it blocks (waits) and wont' start getting images or other content until it's finished.

As long as the code exists, before you call it (say a function call) then it wont' give you any errors. As long as the $(document).ready() function is defined, before you use it, all code should be safe that is called from $(document).ready().

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
0

Yes, if the DOM ready event is triggered that means all of your JavaScript has been loaded and parsed.

DaoWen
  • 32,589
  • 6
  • 74
  • 101
0

The browser will parse the head first. It will parse the html in the <head>, and it will execute any scripts it encounters. This will block the loading of the page. After the <head>, it will parse the <body> in a similar way. This is why putting your code in a function and calling it onload is important if you want to access the dom.

Hope this helps! If you need anything else please post a comment below.

starbeamrainbowlabs
  • 5,692
  • 8
  • 42
  • 73
  • I have in inline script `$(document).ready();` so I can work with DOM, because I have important thing in ready(). – Arxeiss Aug 14 '12 at 17:12
  • Could you use `` perhaps? – starbeamrainbowlabs Aug 14 '12 at 17:13
  • Yes, but why? I have jQuery, and it is more comfortable. And onload is triggered when all images are loaded, not just DOM. Look here [link](http://stackoverflow.com/questions/191157/window-onload-vs-body-onload) – Arxeiss Aug 14 '12 at 17:24
0

The scripts are being loaded in the order in which they are given. So in your case, your inline script 

<script type="text/javascript">
//some JS and jQuery code
</script>

can use objects defined in your included script "src.js".

You cannot manipulate DOM objects before they are created.

<body>
  <div id="div1"></div>

  <script>
    // this code can work with div1
    // but cannot work with div2
  </script>

  <div id="div2"></div>
</body>

So if your script works with DOM, you can either:

  • put it at the end of <body> (only if it is an inline script)

  • call it only after the whole DOM is constructed:

    <body onload="myFunctionThatManipulatesDOM();">

Naturally, the second way is cleaner. Include your scripts in the <head> section, then launch them after the page is loaded in body.onload event.

Imp
  • 8,409
  • 1
  • 25
  • 36