Is always the code written at the bottom of the doc executed after the DOM ready?

Question

Is always the code written at the bottom of the doc executed after the DOM ready ?

Is listening to the ready event of the document

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            // code ..
        });

    </script>

</head>
<body>

    <!-- Document -->

</body>
</html>

Equivalent to writing the code at the bottom of the document ?

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>

    <!-- Document -->

    <script type="text/javascript">

        // code ..

    </script>
</body>
</html>

http://stackoverflow.com/questions/6026645/document-readyfunction-vs-script-at-the-bottom-of-page — j08691, Feb 27 '15 at 01:36

score 3 · Answer 1 · answered Feb 27 '15 at 01:39

Practically, they're close enough that the behavior will be the same for a lot of scripts. Regarding the "code at the bottom of the document" case:

The entire document will have been parsed, except for the end tags. But the way the tree construction algorithm works, the transitions (1, 2) caused by </body> and </html> (provided that your markup is fairly sane) don't affect the tree.

Strictly speaking, code in a <script> tag at the bottom without async or defer attributes executes before the DOMContentLoaded event, so a DOMContentLoaded event handler would still run if registered there. But jQuery's $(document).ready() will run the provided callback immediately if DOMContentLoaded has already been dispatched.

They're drastically different if you want to use document.write though.

Milind Anantwar · Answer 2 · 2015-02-27T01:42:09.230

0

script in body(in between markup) will be executed when DOM is loading . whereas script in the end of document and document ready will be executed when dom is loaded.

edited Feb 27 '15 at 01:42

answered Feb 27 '15 at 01:35

Milind Anantwar

81,290
25
94
125

So what is the reason for writing the code at the button of the document ? – faressoft Feb 27 '15 at 01:37
It delays the loading of javascript files meaning is "speeds up" rendering of other items and it makes sure that you can put eventlisteners on elements already rendered. – PeeHaa Feb 27 '15 at 01:38
Isn't the DOM sort of ready when it gets to the bottom and goes to the script tag? – redCodeAlert Feb 27 '15 at 01:39
1

No the script tags are part of the dom – PeeHaa Feb 27 '15 at 01:39
1

@redCodeAlert: was updating that part. – Milind Anantwar Feb 27 '15 at 01:41

score 0 · Answer 3 · answered Feb 27 '15 at 01:41

While the DOM won't technically be ready until after it's parsed the whole document, the practical result would be the same. All the HTML elements on the page will have been loaded, and your script will be able to interact with them, just as if you had waited until the dom was ready. That being said, waiting until the DOM is ready is often unnecessary and may make your application slower than it needs to be.

Is always the code written at the bottom of the doc executed after the DOM ready?

3 Answers3