Dsync và Defer trong Javascript Chuyên mục Bài Viết Hay 2024-01-15 23 Lượt xem 17 Lượt thích 0 Bình luận

async và defer là hai thuộc tính trong thẻ <script> của HTML, được sử dụng để kiểm soát cách mã JavaScript được tải và thực thi trên trang web. Ngoài ra, nếu không có cả hai thuộc tính này, thì trình duyệt mặc định sẽ thực hiện tải và thực thi mã JavaScript một cách đồng bộ.

1. Không sử dụng thuộc tính async và defer:

Khi bạn không sử dụng cả hai thuộc tính này, trình duyệt sẽ tải và thực thi mã JavaScript ngay khi nó gặp trong HTML, gây ra việc chặn tải trang (blocking). Điều này có thể làm chậm trang web, đặc biệt là khi mã JavaScript làm việc với nội dung quan trọng của trang.

<!DOCTYPE html>
<html>
<head>
    <title>Example without async and defer</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="example.js"></script>
    <p>This is a paragraph.</p>
</body>
</html>

2. Thuộc tính async:

Khi sử dụng async, trình duyệt sẽ tiếp tục tải trang mà không chờ đợi mã JavaScript tải xong. Mã JavaScript sẽ thực thi ngay khi nó tải xong, có thể là trước khi trang web hoàn tất tải.

<!DOCTYPE html>
<html>
<head>
    <title>Example with async attribute</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script async src="example.js"></script>
    <p>This is a paragraph.</p>
</body>
</html>

3. Thuộc tính defer:

Khi sử dụng defer, mã JavaScript sẽ được tải ngay khi trang web tải, nhưng sẽ không thực thi ngay lập tức. Thay vào đó, nó sẽ đợi đến khi trang web hoàn tất tải mới thực thi.

<!DOCTYPE html>
<html>
<head>
    <title>Example with defer attribute</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script defer src="example.js"></script>
    <p>This is a paragraph.</p>
</body>
</html>

Lưu ý rằng việc sử dụng async hoặc defer có thể làm thay đổi thứ tự thực thi của các đoạn mã JavaScript, nên hãy cân nhắc kỹ lưỡng tùy thuộc vào yêu cầu cụ thể của trang web của bạn.