1

As suggested here, http://www.sitepoint.com/jquery-vs-raw-javascript-3-events-ajax/, is loading scripts at the bottom of a page just before the closing body tag a very reliable way of knowing that the DOM is ready?

5
  • 2
    My understanding was that the benefit of loading scripts just before the closing </body> tag was to ensure the HTML/page rendering was completed before executing the scripts, so as to minimise the time it takes to display content to the user
    – Alfie
    Aug 25, 2013 at 23:22
  • No. Its best practice to add any script that relies on being available during dom using the onload event
    – cgatian
    Aug 25, 2013 at 23:22
  • Loading scripts at end of html is "perceived" performance. The script still will execute and lock the dom, the only difference is the visuals are available.
    – cgatian
    Aug 25, 2013 at 23:24
  • @cgatian sorry if I was unclear, but I think that is what I meant - it will mean that the user 'sees' a page as soon as possible, but not necessarily when the page has finished loading/executing all scripts
    – Alfie
    Aug 25, 2013 at 23:25
  • @Alfie yes you are right.
    – cgatian
    Aug 25, 2013 at 23:28

1 Answer 1

0

To summarise comments above:

Loading scripts at the bottom of the page is not a reliable way of knowing that the DOM is ready. As suggested by @cgatian, using an onload or document.ready event is better for this.

The typical benefit of loading scripts just before the closing </body> tag is to ensure the HTML/page rendering is completed before executing the scripts, so as to minimise the time it takes to display content to the user: this means that the user 'sees' a page as soon as possible, but not necessarily when the page has finished loading/executing all scripts.

3
  • onload is a very good candidate except for its obvious limitation of allowing only one listener per the event. onload in particular isn't executed until every asset has been loaded. A more efficient way will be to use the DOM Level 2 event model syntax to register listeners for the DOMContentLoaded event document.addEventListener("DOMContentLoaded", init);. And by document.ready, are you referring to the jQuery $(document).ready() idiom?
    – Rayreprise
    Aug 26, 2013 at 0:26
  • I suppose it depends on your context, afaik DOMContentLoaded is only compatible with IE9+; if this isn't a problem, it sounds a good option, but with regards to your original question, deferring script loading is not equivalent to a 'dom loaded check'. And yes @ jquery/document.ready .. sorry for the lack of clarification there
    – Alfie
    Aug 26, 2013 at 0:30
  • Well grasped. The safest approach is to perform a dom ready check. Ughh...IE has always been a huge pain in the ass.
    – Rayreprise
    Aug 26, 2013 at 1:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.