- In HTML, the `async` and `defer` attributes can be added to `<script>` tags to control how JavaScript is loaded and executed. They are used to improve the performance and loading time of web pages. Here’s an explanation of each:
- 1. Loading Behavior: Scripts with the `async` attribute are downloaded in parallel with other resources (such as HTML parsing) without blocking the browser's rendering process.
- As soon as the script is downloaded, it is executed immediately, even if the HTML parsing is not finished.
- 2. Execution Order: The execution order is not guaranteed. Scripts with `async` may execute in any order, depending on which one finishes downloading first.
- 3. Use Case: `async` is suitable for scripts that do not depend on other scripts and do not need to access the DOM during page load, such as analytics or advertising scripts.
- 1. Loading Behavior: Scripts with the `defer` attribute are also downloaded in parallel with other resources.
- However, they are not executed until the HTML parsing is complete.
- 2. Execution Order: Scripts with `defer` are executed in the order they appear in the document.
- 3. Use Case: defer is suitable for scripts that need to access the DOM or depend on other scripts. It ensures that the script runs after the entire document has been parsed.
- 1. Loading and Execution: Without these attributes, scripts are loaded and executed immediately in the order they appear in the HTML. This can block the browser from rendering the rest of the page until the script is fully loaded and executed.
- 2. Effect on Performance: This blocking behavior can significantly delay the rendering of the page, leading to a poor user experience, especially if the scripts are large or the network is slow.
- Here's an example to illustrate the differences:
<!DOCTYPE html>
<html>
<head>
<title>Async vs Defer</title>
<!-- Blocks HTML parsing -->
<script src="script1.js"></script>
<!-- Loads in parallel, executes as soon as it's ready -->
<script src="script2.js" async></script>
<!-- Loads in parallel, executes after HTML parsing is complete -->
<script src="script3.js" defer></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
- script1.js will block HTML parsing until it is fully loaded and executed.
- script2.js will be loaded in parallel and executed as soon as it's ready, potentially before script3.js and before the HTML parsing is complete.
- script3.js will be loaded in parallel but will only execute after the HTML parsing is complete and in the order it appears in the document.
- async: Non-blocking, no execution order guarantee, immediate execution after loading.
- defer: Non-blocking, preserves execution order, execution after HTML parsing.
- Without both: Blocking, scripts executed immediately in order, can delay page rendering.
- Using `async` or `defer` appropriately can greatly enhance the performance and responsiveness of a web page.
No comments:
Post a Comment