Javascript là ngôn ngữ lập trình phía khách hàng phổ biến và mạnh mẽ, được sử dụng để tạo ra các website động. Trong lập trình web, việc tối ưu hóa hiệu suất là vô cùng quan trọng. Do đó, việc hiểu và sử dụng đúng cách thuộc tính async và defer trong JavaScript sẽ giúp bạn cải thiện hiệu suất tải trang web một cách đáng kể.
Thuộc tính async cho phép trình duyệt tiếp tục tải HTML trong khi tải và thực thi tập lệnh JavaScript song song. Khi một thẻ <script> có thuộc tính async, tập lệnh đó sẽ được tải và thực thi ngay khi hoàn thành, không đợi đến khi toàn bộ tài liệu HTML đã được phân tích hoàn chỉnh.
<script src="example.js" async></script>
Thuộc tính defer cũng cho phép tải HTML song song với việc tải tập lệnh JavaScript, tuy nhiên, khác với async, các tập lệnh có thuộc tính defer sẽ chỉ được thực thi khi toàn bộ tài liệu HTML đã phân tích xong.
<script src="example.js" defer></script>
Sử dụng async khi:
<script src="tracking.js" async></script>
Trong trường hợp này, tracking.js có thể là một đoạn mã theo dõi mà không cần tương tác với DOM ngay lập tức.
Sử dụng defer khi:
<script src="main.js" defer></script>
Trong ví dụ này, main.js có thể chứa các hàm thao tác DOM phức tạp, cần đợi tài liệu HTML hoàn thành trước khi thực thi.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Example</title>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Example</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>Hello World!</h1>
<div id="container"></div>
<script>
document.getElementById('container').innerText = "DOM Manipulated!";
</script>
</body>
</html>
async và defer là hai thuộc tính quan trọng của thẻ <script> trong JavaScript, giúp tối ưu hóa việc tải tập lệnh và hiệu suất của trang web. Hiểu rõ cách sử dụng và các trường hợp áp dụng của từng thuộc tính sẽ giúp bạn xây dựng các trang web với hiệu suất cao và trải nghiệm người dùng tốt hơn.
