Thuộc tính async của thẻ HTML <script>
Định nghĩa và cách sử dụng
async Thuộc tính là một thuộc tính布尔.
Nếu đã thiết lập async Thuộc tính, kịch bản sẽ được tải xuống song song khi phân tích trang và được thực hiện ngay lập tức khi có sẵn. Một khi kịch bản hoàn toàn tải xuống, phân tích trang sẽ bị gián đoạn, sau đó thực hiện kịch bản, sau đó tiếp tục phân tích phần còn lại của trang.
Lưu ý:async Thuộc tính chỉ áp dụng cho kịch bản bên ngoài (và chỉ nên sử dụng khi thuộc tính src tồn tại).
Lưu ý:Có thể thực hiện kịch bản bên ngoài bằng nhiều cách:
- Nếu đã thiết lập async: kịch bản sẽ được tải xuống song song khi phân tích trang và được thực hiện ngay lập tức khi có sẵn (trước khi phân tích hoàn thành)
- Nếu đã thiết lập defer (và chưa thiết lập async): kịch bản sẽ được tải xuống song song khi phân tích trang và được thực hiện sau khi phân tích trang hoàn thành
- Nếu không có cả async và defer: kịch bản sẽ được tải xuống và thực hiện ngay lập tức, chặn phân tích trang web cho đến khi kịch bản được thực hiện xong
Mô hình
Kịch bản được trích dẫn sẽ được tải xuống song song khi phân tích trang và được thực hiện ngay lập tức khi có sẵn:
<script src="demo_async.js" async></script>
Cú pháp
<script async>
Thực hiện kịch bản đồng bộ
Hành vi mặc định khi trình duyệt gặp phần tử script là dừng xử lý trang web khi tải và thực hiện kịch bản. Các phần tử script được thực hiện theo thứ tự (theo thứ tự được định nghĩa) đồng bộ (không xử lý thêm bất kỳ việc nào khác trong quá trình tải và thực hiện kịch bản).
Mặc định, việc thực hiện đồng bộ theo thứ tự là cách xử lý kịch bản. Tuy nhiên, có một số kịch bản không cần xử lý như vậy, đối với loại kịch bản này có thể sử dụng async Thuộc tính để cải thiện hiệu suất. Một ví dụ điển hình là đoạn mã theo dõi (tracking script). Loại đoạn mã này có thể báo cáo lịch sử truy cập trang web của người dùng để các công ty quảng cáo tùy chỉnh và phát hành quảng cáo dựa trên thói quen của người dùng, hoặc thu thập dữ liệu thống kê về người truy cập trang web để phân tích, và những điều tương tự. Những đoạn mã này hoạt động độc lập, thường không cần tương tác với các phần tử trong tài liệu HTML. Việc trì hoãn hiển thị trang để chờ chúng tải và gửi báo cáo về máy chủ của mình là không có ý nghĩa.
Sử dụng async Sau khi thêm thuộc tính này, trình duyệt sẽ tải và thực thi đoạn mã một cách đồng bộ trong khi tiếp tục phân tích các phần tử khác của HTML (bao gồm các phần tử script khác). Nếu sử dụng đúng cách, điều này có thể cải thiện đáng kể hiệu suất tải tổng thể.
Lưu ý:Sử dụng async Một hậu quả quan trọng của thuộc tính này là các đoạn mã trong trang có thể không được thực thi theo thứ tự được định nghĩa. Do đó, nếu đoạn mã sử dụng các hàm hoặc giá trị được định nghĩa trong đoạn mã khác, thì không nên sử dụng. async Thuộc tính.
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.6 | 5.1 | 15.0 |
