Khi bạn tải một trang HTML trên trình duyệt, hai điều chính được thực hiện trong quá trình này là:
- Chuyển đổi HTML
- Tải các đoạn mã (script)
Quá trình tải các tệp mã script bao gồm hai phần nhỏ:
- Tìm nạp tập lệnh từ mạng
- Biên dịch và thực thi mã
Một thẻ <script> có hai thuộc tính chính là async và defer. Các thuộc tính này cung cấp cho chúng ta nhiều quyền kiểm soát hơn đối với cách tìm nạp và thực thi các đoạn script.
Sử Dụng Thẻ <script> Thông Thường
Thông thường, chúng ta sử dụng thẻ <script> theo dạng sau:
html
<body>
<!-- .... -->
<script src="/dist/bundle.js"></script>
</body>Giả sử trình duyệt của bạn đang phân tích cú pháp HTML và gặp thẻ <script> yêu cầu tải đoạn mã script /dist/bundle.js.
Trường Hợp Thông Thường (Normal)
Quá trình này diễn ra tuần tự từ trên xuống dưới trong mã nguồn với thứ tự:
- JavaScript chặn phân tích cú pháp HTML.
- Tìm nạp tập lệnh từ mạng.
- Thực thi tập lệnh.
- Phân tích cú pháp HTML chỉ tiếp tục sau khi tập lệnh được thực thi đầy đủ.
Sử Dụng Thuộc Tính async
Thuộc tính async được sử dụng để thông báo cho trình duyệt biết rằng tệp script có thể được thực thi không đồng bộ khi trình duyệt bắt gặp chúng, đồng thời có thể tải các đoạn mã HTML, script, ... bên dưới chúng mà không bị chặn.
html
<script src="/dist/bundle.js" async></script>Trong khi sử dụng thuộc tính async, quá trình phân tích cú pháp HTML đang diễn ra, bất kỳ tập lệnh nào có thuộc tính async đều được tìm nạp từ mạng một cách không đồng bộ cùng với quá trình phân tích cú pháp HTML.
Sử Dụng Thuộc Tính defer
Thuộc tính defer ra lệnh cho trình duyệt chỉ thực thi tệp script khi tài liệu HTML đã được phân tích cú pháp đầy đủ.
html
<script src="/dist/bundle.js" defer></script>So Sánh async và defer
| Thuộc tính | Tìm nạp tập lệnh từ mạng | Thực thi tập lệnh | Phân tích cú pháp HTML |
|---|---|---|---|
async |
Không đồng bộ | Ngay sau khi tải xong | Tiếp tục khi tải script |
defer |
Không đồng bộ | Sau khi phân tích cú pháp HTML xong | Tiếp tục khi tải script |
Kết Luận
Qua bài viết này, chúng ta đã phân biệt được cách thức hoạt động của hai thuộc tính defer và async trong thẻ <script>.
Một số lưu ý khi sử dụng:
- Xác định rõ đoạn mã nào cần được tải và thực thi để tránh tình trạng tải và thực thi sai trình tự.
- Sử dụng async cho các script không phụ thuộc vào việc tải hoàn toàn HTML.
- Sử dụng defer cho các script cần được thực thi sau khi toàn bộ HTML đã được phân tích cú pháp.
Việc hiểu và áp dụng đúng các thuộc tính này sẽ giúp tối ưu hóa hiệu suất tải trang của bạn.
