src attribute of a
<script> element is used to point to the location of a script file.
The file referenced can be local (using a relative path) or hosted elsewhere (using an absolute path).
<!-- Using a relative path --><script src="./script.js"></script><!-- Using an absolute path --><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
defer attribute of a
<script> tag is a boolean attribute used to indicate that the script can be loaded but not executed until after the HTML document is fully parsed. It will only work for externally linked scripts (with a
src attribute), and will have no effect if it is applied to an inline script.
In the example code block, the
<h1> tag will be loaded and parsed before the script is executed due to the
<body><script src="main.js" defer></script><h1>Hello</h1></body>
Scripts are loaded synchronously as they appear in an HTML file, before the following HTML is loaded and parsed. The
async attribute can be used to load the scripts asynchronously, such that they will load in the background without blocking the HTML parser from continuing.
In the example code block, the script will load asynchronously in the background, without blocking the HTML parser.
<body><script src="main.js" async></script><h1>Hello world!</h1></body>