0

I've come across old web site pages where jQuery is being loaded after the content as part of the footer.php. My gut reaction, since we're loading it from a public CDN, we should just place it in header.php. Our individual <script> is deployed at the end of the page.php content — we won't have to wrap code within vanilla javascript document.ready functions any longer.

w3schools recommends this, within <head></head>.

Bootstrap 4.6 recommends after the content, pre-</body>. (Bootstrap 5.0 does not require jQuery)

This post from 2010, updated in 2017, is potentially outdated.

Is there any logic behind loading jQuery post-content in 2021? Does a CDN loaded jQuery call belong before or after the content?

franklylately
  • 1,112
  • 10
  • 12
  • 4
    *"w3schools recommends this"* w3schools is notoriously poor. – T.J. Crowder Jun 05 '21 at 16:49
  • Depends on what you're using jQuery for, and where your own script is located. In general, it's better to [progressively enhance](https://en.wikipedia.org/wiki/Progressive_enhancement) the page *after* it has loaded – Bergi Jun 05 '21 at 16:52
  • 1
    jQuery goes before the scripts that reference `$`, that's the only hard requirement. – user229044 Jun 05 '21 at 16:59
  • If SEO or performance is a factor, load your js at the end async deferred, but if you're heavily invested in either of those, you wouldn't be using jQuery anyway. – Lawrence Johnson Jun 05 '21 at 17:23

2 Answers2

2

Does a CDN loaded jQuery call belong before or after the content?

It's up to you and there's no one-size-fits-all solution, but if you move it to head, you'll probably want to use defer (or type="module") or at least async. See this diagram from the HTML spec, which is really useful for visualizing when script tags do and don't hold up parsing your HTML and presenting your content:

enter image description here

As you can see from the top item there, just doing <script src="//cdn.example.com/jquery"></script> probably isn't a good idea; the browser has to wait until jQuery has been downloaded, parsed, and executed before it can continue processing the HTML. Even though it's coming from a CDN, that process takes non-zero time. The defer flow lets the browser continue and runs the script at the end, once the HTML is parsed. (There's also async, but beware that async means the order of script execution is chaotic because scripts are executed as soon as they've been downloaded. defer is generally preferred, not least because scripts are executed in a defined order [the order of their script elements in the document].)

So if you want to move the jQuery script tag, you probably want <script defer src="//cdn.example.com/jquery"></script> or possibly <script async src="//cdn.example.com/jquery"></script>.

CertainPerformance points out a possible use-case for async: a truly and unavoidably massive and complex page (takes a long time to lay out), where the script may be useful even before the page is fully loaded and laid out. (Whether the JavaScript spec is "unavoidably" large and complex is an open question, but it's currently a good example.) In that case you might well want async. But if you did that, you'd probably want to bundle your scripts together with jQuery so that you don't have the situation where your code that relies on jQuery tries to run before jQuery has been loaded.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
2

A slight problem with putting an external script at the bottom of the page is that, if the page is large (example), and if the script isn't cached, the script will take an unnecessary additional amount of time to load:

  • The page will have to be fully downloaded, then
  • A network request to download the script is made, then
  • The script gets downloaded and parsed

On small pages, this isn't much of an issue, since the amount of content in the HTML to download is small, and modern browsers are smart enough to look ahead to see what they'll need to download in advance, while still rendering - regardless of the placement of the script tag, a request to download it (if needed) will be made almost as soon as the page content gets returned to the browser.

Another issue with putting script tags at the bottom with large pages is that, if the page is intended to be interactable when fully loaded, the page may appear unresponsive to the user until that point. In this sort of situation, a possible approach would be to load jQuery with the async attribute, at the top of the page, so that as soon as it's downloaded, it can be run (and attach a load listener to the jQuery tag to run your own script after it).

On small pages, it doesn't really matter - you can achieve the desired results pretty easily using many methods. If you don't want to wrap your code in document.ready, you can also put your script at the top and use the defer attribute to tell the browser to run the script as soon as the DOM is finished being created. This is essentially the same as putting the script at the end of the <body>.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320