Home/ Questions/Q 7974491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T08:23:25+00:00

I am confused about which JavaScript should be included where? For instance: Where should

  • 0

I am confused about which JavaScript should be included where?

For instance:

  • Where should one include the jQuery libraries? In the <head> or before the closing </body> element?

  • If the JavaScript is defined at the bottom in the <body>, can it be used inline in the body?

  • If it blocks parallel downloads, then why is it never said to include your CSS at the bottom?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Place of the <script> Element

    The script elements block progressive page downloads.
    Browsers download several components at a time, but when they encounter an external script, they stop further downloads until the script file is downloaded, parsed, and executed.
    This hurts the overall page time, especially if it happens several times during a page load.
    To minimize the blocking effect, you can place the script element toward the end of
    the page, right before the closing tag.
    This way there will be no other resources for the script to block.
    The rest of the page components will be downloaded and already engaging the user.
    The worst antipattern is to use separate files in the head of the document:

    <!doctype html>
<html>
<head>
    <title>My App</title>
    <!-- ANTIPATTERN -->
    <script src="jquery.js"></script>
    <script src="jquery.quickselect.js"></script>
    <script src="jquery.lightbox.js"></script>
    <script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>

    A better option is to combine all the files:

    <!doctype html>
<html>
<head>
    <title>My App</title>
    <script src="all_20100426.js"></script>
</head>
<body>
    ...
</body>
</html>

    And the best option is to put the combined script at the very end of the page:

    <!doctype html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    ...
    <script src="all_20100426.js"></script>
</body>

    “JavaScript Patterns, by Stoyan Stefanov
    (O’Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.”

    • 0