Thuộc tính defer của thẻ HTML <script>

Thẻ <script> HTML

Định nghĩa và cách sử dụng

defer Thuộc tính này là một thuộc tính boolean。

Nếu đã thiết lập defer Thuộc tính, thì sẽ chỉ định đoạn mã script được tải song song khi phân tích cú pháp trang web, và sẽ được thực thi sau khi phân tích cú pháp hoàn thành。

Lưu ý:defer Thuộc tính này chỉ áp dụng cho đoạn mã script外部脚本（chỉ có Thuộc tính src thì mới nên sử dụng）。

Lưu ý:Có thể thực thi đoạn mã script外部脚本 bằng nhiều cách:

  • Nếu đã thiết lập async: đoạn mã script sẽ được tải song song khi phân tích cú pháp trang web, và sẽ được thực thi ngay lập tức khi có sẵn (trước khi phân tích cú pháp hoàn thành)
  • Nếu đã thiết lập defer (và không thiết lập async): đoạn mã script sẽ được tải song song khi phân tích cú pháp trang web, và sẽ được thực thi sau khi phân tích cú pháp hoàn thành
  • Nếu cả async và defer đều không có: đoạn mã script sẽ được tải và thực thi ngay lập tức, chặn việc phân tích cú pháp trang web, cho đến khi đoạn mã script hoàn thành

Mô hình

Script sẽ tải song song với việc phân tích trang và được thực thi sau khi trang hoàn thành phân tích:

<script src="demo_defer.js" defer></script>

Thử ngay

Cú pháp

<script defer>

Để trì hoãn việc thực thi script

Bạn có thể kiểm soát cách thực thi script bằng các thuộc tính async và defer. Thuộc tính defer sẽ告知 trình duyệt phải chờ trang tải và phân tích xong mới thực thi script.

Trình duyệt sẽ trì hoãn việc tải và thực thi script cho đến khi tất cả các phần tử trong tài liệu HTML đã được phân tích xong.

Kết quả này tương tự như việc di chuyển script đến cuối trang:

<body>
... ...
... ...
... ...
<script src="demo.js"></script>
</body>

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.5 5.0 15.0

Thẻ <script> HTML