Categories Tối ưu JavaScript

Loại bỏ JavaScript chặn hiển thị với Async và Defer

Với HTML5, chúng ta có hai thuộc tính boolean mới cho thẻ <script> là: asyncdefer.

Async cho phép thực thi các đoạn mã không đồng bộ và defer cho phép thực thi chỉ khi toàn bộ tài liệu được phân tích cú pháp (parse) xong.

Đây là hai thuộc tính bắt buộc nếu bạn muốn tăng tốc website. Chúng cho phép loại bỏ JavaScript chặn hiển thị (những đoạn mã được thực thi trước khi quá trình render trang hoàn thành, do vậy nó làm chậm quá trình hiển thị).

Dưới đây là ví dụ về cách sử dụng:

<script defer src=“/js/jquery.min.js”> </script>

<script async src=“/js/extras.min.js”> </script>

Async vs Defer

Với async, file JS được tải không đồng bộ và sau đó được thực thi ngay khi tải xuống.

Với defer, file JS cũng được tải xuống không đồng bộ, nhưng được thực thi chỉ khi quá trình phân tích tài liệu đã hoàn thành.

Với defer, các mã sẽ được thực thi giống như thứ tự mà chúng được gọi. Điều này làm cho defer là là thuộc tính bạn nên chọn khi script này phụ thuộc vào script khác. Ví dụ, nếu bạn sử dụng jQuery cũng như các script khác phụ thuộc vào nó, rồi bạn sử dụng defer với các script này (bao gồm cả jQuery), điều này giúp đảm bảo rằng jQuery sẽ được gọi trước các script phụ thuộc vào nó.

Chiến lược tốt là ưu tiên sử dụng async khi có thể, và sử dụng defer nếu async không phù hợp.

Lưu ý: cả hai thuộc tính không có bất kỳ ảnh hưởng nào đối với các script nội tuyến (inline).

(Dịch từ bài viết: Eliminate Render-Blocking JavaScript with Async and Defer trên trang Alligator)

Back to Top