Difference between defer and async in the script tag

May 11, 2023#零碎知识点 #js593

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The "async" attribute is used to indicate whether a browser should load a script asynchronously. When set to "async", the script will be executed asynchronously while being downloaded, without blocking the page's parsing and rendering. This allows scripts to be downloaded in the background without affecting the page's performance. However, scripts with the "async" attribute may not execute in the order they appear on the page, which can lead to unpredictable behavior if multiple scripts depend on each other. In such cases, it is recommended to use the "defer" attribute instead, which also loads scripts asynchronously but executes them in the order they appear on the page.

async#

A boolean attribute for the <script> tag that indicates whether the browser should load the script asynchronously. When set to async, the script will be executed asynchronously while downloading, without blocking the parsing and rendering of the page. This allows the script to be downloaded in the background without affecting the performance of the page.

When set to async, scripts will not be executed in the order they appear on the page, but as soon as they finish downloading. This means that if there are multiple scripts that depend on each other in the page, using the async attribute may result in some unpredictable behavior, as these scripts may not be executed in the correct order.

defer#

Therefore, if there are multiple scripts that depend on each other, it is best to use the defer attribute instead of the async attribute. The defer attribute also allows scripts to be loaded asynchronously, but they will be executed in the order they appear on the page.