Loại bỏ JavaScript chặn hiển thị với Async và Defer
Với HTML5, ta nhận được hai thuộc tính boolean mới cho thẻ <script> : async và defer . Async cho phép thực thi các tập lệnh một cách không đồng bộ và trì hoãn chỉ cho phép thực thi sau khi toàn bộ tài liệu đã được phân tích cú pháp.
Hai thuộc tính này là yếu tố bắt buộc để tăng tốc độ và hiệu suất của trang web. Chúng cho phép loại bỏ JavaScript chặn hiển thị nơi trang sẽ phải tải và thực thi các tập lệnh trước khi kết thúc để hiển thị trang. Đây là một ví dụ sử dụng:
<script defer src="/js/jquery.min.js">
</script>
Async vs Defer
Với async, các file được tải không đồng bộ và sau đó thực hiện càng sớm càng nó tải về.
Với trì hoãn , file được download không đồng bộ nhưng chỉ được thực thi khi quá trình phân tích cú pháp tài liệu hoàn tất. Với trì hoãn , các tập lệnh sẽ thực thi theo thứ tự như chúng được gọi. Điều này làm cho thuộc tính của sự lựa chọn trì hoãn khi một tập lệnh phụ thuộc vào tập lệnh khác. Ví dụ: nếu bạn đang sử dụng jQuery cũng như các tập lệnh khác phụ thuộc vào nó, bạn sẽ sử dụng trì hoãn chúng (bao gồm jQuery), đảm bảo gọi jQuery trước các tập lệnh phụ thuộc.
Một chiến lược tốt là sử dụng async khi có thể, và sau đó Hoãn khi async không phải là một lựa chọn.
👉 Lưu ý cả hai thuộc tính không có bất kỳ ảnh hưởng nào đến các tập lệnh nội tuyến.
Hỗ trợ trình duyệt
Tôi có thể sử dụng script-async không? Dữ liệu về hỗ trợ tính năng script-async trên các trình duyệt chính từ caniuse.com.
Các tin liên quan
Toán tử bậc ba trong JavaScript2016-08-14
Cách quản lý phụ thuộc JavaScript và CSS Front-End với Bower trên Ubuntu 14.04
2015-08-26
