CODEWITHSUNDEEP
javascriptjqueryhtml
Arxeiss
Arxeiss

Reputation: 1046

HTML order of loading content and JavaScript

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?

Upvotes: 0

Views: 2235

Answers (6)

user1521604
user1521604

Reputation:

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().

Upvotes: 1

Imp
Imp

Reputation: 8609

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.

Upvotes: 0

starbeamrainbowlabs
starbeamrainbowlabs

Reputation: 6106

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.

Upvotes: 0

otakustay
otakustay

Reputation: 12395

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.

Upvotes: 6

DaoWen
DaoWen

Reputation: 33019

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

Upvotes: 0

Travis J
Travis J

Reputation: 82267

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.

Upvotes: 1

Related Questions