[Thảo luận] Khi nào cần sử dụng async và defer trong javascript

Khi nào cần sử dụng async và defer trong javascript

Chắc hẳn các bạn cũng không lạ gì 2 thuộc tính này. Đây là 2 thuộc tình mình hay sử dụng để tối ưu tốc độ tải trang cho khách hàng ( còn site mình thì mình không chịu dùng ahihi ) .

Như các bạn đã biết thì một trang web sẽ tải trang từ trên xuống dưới.

Code:

<html>
<head>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
    Nội dung
</div>
</body>
</html>

Như đây là trường hợp javascrip bình thường và trình duyệt sẽ được load từ trên xuống dưới, load xong file script ở head sau đó mới load xuống html nội dung

Khi nào sử dụng async?

Khi sử dụng async vào scrip trên thì khi trình duyệt load đến script thì tiếp tục load song song html ở dưới.

Code:

<html>
<head>
    <script type="text/javascript" src="script.js" async></script>
</head>
<body>
<div>
    Nội dung
</div>
</body>
</html>

Khi nào sử dụng defer?

Với thuộc tính defer thì trình duyệt sẽ load song song scrip và html nhưng khi load hết html mới bắt đầu thực thi scrip mà không thực thi scrip luôn như async

Code:

<html>
<head>
    <script type="text/javascript" src="script.js" defer></script>
</head>
<body>
<div>
    Hello, world!
</div>
</body>
</html>

Các bạn có thể xem hình dưới để hiểu rõ hơn

[Thảo luận] Khi nào cần sử dụng async và defer trong javascript 5W7rtUL