What is the difference between placing a script at the end of tag vs adding it on the head and using document on load to assure the html content is already rendered. Placing it at the end of the body wouldnt already assure the content is loaded and ready to manipulate?
Using the 'onload' event provided by the browser has always worked for me. It has the upside that moving the script tag doesn't break your code.
The load event only fires when all images and potentially other resources like style sheets have loaded. This is not yet guaranteed when the script, that is placed at the end of the document body, gets executed. Often that is also not needed for the script to execute correctly, as it can access the DOM.
See also on MDN:
load event
DOMContentLoaded event
Related
I'm currently learning jQuery after finishing JavaScript course. The document says that the ready method waits until DOM finished loading. However, I have 2 points I'm curious about.
1) Since the script tag are usually added at the end of the body tag, shouldn't the DOM already finished loading anyway without the ready method.
2) If we need the ready method in jQuery, why do we not need it when writing usual JavaScript too?
1) Since the script tag are usually added at the end of the body tag, shouldn't the DOM already finished loading anyway without the ready method.
Yes you are right, if script tag is added add the end of the body, you do not need to wrap your code with $(document).ready() as the DOM elements are already available to use in the code.
2) If we need the ready method in jQuery, why do we not need it when writing usual JavaScript too?
The jQuery equivalent of $(document).ready() is DOMContentLoaded
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Please Note: You can also use script defer attribute
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
$(function(){}) is the the same as jquery's $(document).ready so I am wondering if I can put it into body
instead of head ?
I only see the act of putting script at different section of the page as a matter of executing it at different time. It is true? Can I put script in a div in the middle of the page? Will it affect how DOM is loaded?
I only see the act of putting script at different section of the page as a matter of executing it at different time. It is true?
Yes, but the script you're talking about just makes a single function call (to ready). The callback will get called later, when the DOM is ready, either way.
Can I put script in a div in the middle of the page?
Yes. But again, if the script in question is just calling ready (directly, or via the shortcut), it doesn't much matter. I would discourage you from littering scripts all over your markup; best to try to keep the two largely separate.
Will it affect how DOM is loaded?
Only if you use document.write within the script (and even then, it doesn't affect how the DOM is loaded, but may affect the content of it).
If you can choose where the script tags go (e.g., you're not writing a JavaScript library or jQuery plug-in, your script is on a page you control), there's little if any reason to use ready. Instead, put your script tag at the end of the page, just before the closing </body> tag. References:
Google Closure engineers on when the DOM is ready
YUI Best Practices for Speeding Up your Website
The purpose of document.ready is to wait till the DOM is ready, if you put your scripts just before the body closing tag or just after the html that is being modified then you don't need document.ready although it should still work.
This will work but it is bad practice. If you can you should put your scripts at the end of your webpage rather than in the head. Unless of course you have something (like a document ready function) that you need to load first.
If we call a javascript method myMethod() in a script tag which is before closing body, is it equivalent to calling myMethod() inside jQuery's document.ready function ? If not, Why ?
From here:
Under the hood: $(document).ready() As you would expect from John
Resig, jQuery’s method for determining when the DOM is ready uses an
assortment of optimizations. For example, if a browser supports the
DOMContentLoaded event (as many non-IE browsers do), then it will fire
on that event. However, IE can’t safely fire until the document’s
readyState reaches “complete”, which is typically later. If none of
those optimizations are available, window.onload will trigger the
event.
These events are independent of a location within the HTML tag, as other event still are going on even at the time of rendering </body>.
No it's not the same, you place the <script> tags before the closing </body> tag to avoid blocking the rendering of html on older browsers, AFAIK, but you have no guarantee that the DOM is "ready"
Not exactly. $(document).ready(); reacts on the so called DOMContentLoaded event which is fired right after the DOM has been loaded and the browser is aware of all the elements on the page (not the content itself).
The main reason why code is usually put inside these blocks is not that much related to preventing blocking of parallel loading but to ensure that the elements which are to be manipulated during page load are actually loaded and present in the DOM tree. Not much sense in manipulating elements which the browser is not aware of right?
Putting JavaScript content (or any other content for that matter) at the bottom of the page is actually more closely related to the onload event which is fired after the page has finished loading, including the content itself. Either way its almost certain that content inside $(document).ready() blocks will be executed before the one at the bottom of the page however if you load external libraries on which the code inside the ready() block relies you can't put those at the bottom of the page.
In general if you have code that isn't dependent on external libraries and a successful loading of DOM you can safely put it at the bottom of the page. If you however have stuff that needs to be executed right after the DOM has been loaded you most definitely want that code in the $(document).ready() block, but do have in mind that you can place that block wherever you want, even in the middle of the page (which can be a nice trick sometimes).
I have a page with <form> tag. Inside a form there is a lot of html plus some inline JavaScript at the very end of the <form> tag.
I listen to document load event. Can I be 100% sure, that when document load will be fired, all this inline JavaScript code has been already executed?
Example of markup:
<body>
<form>
--html controls---
<script type="text/javascript">
--some code to run here--
</script>
</form>
</body>
My thoughts that answer is yes, inline JavaScript will be executed before document load, but I want to find evidence.
edit
live demo
Document load fires only when all html controls loaded and JavaScript (inline or with src attribute)loaded and interpreted. Am I correct with this statement?
Unless you put the code you want to execute in the domready callback function, your inline javascript code will be executed immediately when you load the page (before the the domready).
Inline script will execute immediately as soon as the script tag finishes parsing, so you won't be able to access the rest of the document yet. On the other hand, it allows you to write additional HTML at that point in the document.
Note that Firefox 3.5 had a bug whereby you could set the defer attribute on the inline script and it would not execute immediately. This non-standard behaviour was fixed in Firefox 3.6.
I think you have no guarantees
If it is a slow javascript (emscripten) i think it is possible that the code is still beeing executed while the onload fires.
but i could not find clear documentation:
https://developer.mozilla.org/en/DOM/window.onload
http://msdn.microsoft.com/en-us/library/ie/cc197055%28v=vs.85%29.aspx
http://www.w3.org/TR/html4/html40.txt :
onload = script [CT]
The onload event occurs when the user agent finishes loading a
window or all frames within a FRAMESET. This attribute may be
used with BODY and FRAMESET elements.
so I can't find guarantees, you can either test (with something heavy, e.g. a demo from here https://github.com/kripken/emscripten/wiki), hpe for the best, or build in a savequard of your on that checks weather your inline script completed
What's the difference between executing a JavaScript function on jQuery's $(document).ready() and including it in the HTML in script tags at the end of the body?
Thanks,
DLiKS
JavaScript code inside the <script> tags is evaluated (executed) immediately. Note that in this case the page has not been parsed yet (entirely), and the DOM is not yet ready.
JavaScript code inside the jQuery ready() callback is evaluated on the DOMContentLoaded event, which occurs after the entire HTML source code has been parsed by the browser.
About this event: https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
Note that the modern way of defining the ready handler is this:
$(function() {
// code
});
Also, check out this SO question, which points out what happens when you don't use the ready callback: How many JavaScript programs are executed for a single web-page in the browser?
A script at the end of the body will
run as soon as it is loaded.
$.ready is executed after the document is complete (any
linked css is also loaded).
Body.load runs
only when all images are loaded as
well.
This SO question might be helpful.
If you call a function in a script that is placed next to the closing body tag (</body>) it's the same thing as using $(document).ready(function(){}); in the <head> section.