Menu
I just realized that I lack the fundamental knowledge of what exactly happens as a page is being loaded into a browser.
Assume I have a structure like this:
<head> <script src="jquery.js" type="text/javascript"></script> <script src="first.js" type="text/javascript"></script> </head> <body> ... <script type="text/javascript" id="middle"> // some more JS here... </script> ... <script src="last.js" type="text/javascript"></script> </body> Here are the questions I have:
What sequence are things happening in? First the DOM then the JS is executed, is it vice-versa, or is it simultaneous (or as soon as the JS files finish downloading, without any regard to the DOM)? I know that scripts are loaded in order.
Where does $(document).ready() fit in? In Firebug's Net tab I see DOMContentLoaded event and the load event. Is $(document).ready() triggered when the DOMContentLoaded event fires? Couldn't find any concrete info on this (everyone merely mentions "when the DOM is loaded").
What exactly does "when the DOM is loaded" mean? That all HTML/JS has been downloaded and parsed by the browser? Or just the HTML?
Is the following scenario possible: there is a $(document).ready() which calls code in last.js, but runs before last.js has loaded? Where would it most likely be (in first.js or the inline code block)? How can I prevent this scenario?
I want to undestand the big picture of what happens when and what depends on what (if at all).
762
jQuery $(document). ready() Equivalent in JavaScriptThis event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded. The onload event is a standard event in the DOM, while the ready event is specific to jQuery.
load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
The DOMContentLoaded event fires when parsing of the current page is complete; the load event fires when all files have finished loading from all resources, including ads and images.
Javascript is executed as it is seen. Usually, the browser stops parsing the page as soon as it sees a <script> tag, downloads and runs the script, and then keeps going. This is why it's commonly advised to put <script> tags at the bottom: so the user doesn't have a blank page while the browser waits for the scripts to download.
However, starting from Firefox 3.5, scripts are downloaded in the background while the rest of the page is rendered. In the now-unusual event that the script uses document.write or similar, Firefox will back up and redraw as necessary. I don't think other browsers do this at the moment, but I wouldn't be surprised if it were forthcoming, and IE at least supports a defer attribute in the <script> tag that will defer loading the script until after the page is loaded.
DOMContentLoaded is exactly that: it fires as soon as the DOM is loaded. That is, as soon as the browser has parsed all of the HTML and created a tree of it internally. It does NOT wait for images, CSS, etc. to load. The DOM is all you usually need to run whatever Javascript you want, so it's nice to not have to wait for other resources. However, I believe only Firefox supports DOMContentLoaded; in other browsers, ready() will just attach an event to regular old onload.
Javascript is guaranteed to run in the order it appears in your HTML, so just make sure your function is defined before you try to attach it to an event.
80
answered Sep 24 '22 00:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
