Loại bỏ Render-Blocking trong Javascript với Async và Defer

Trong Html5, chúng ta đã có thêm 2 thuộc tính (attribute) mới cho thẻ <script> là: async defer.

Async cho phép việc thực hiện (execute) các scripts bất đồng bộ. Defer thì cho phép việc thực hiện (execute) chỉ sau khi toàn bộ Document đã được Parse. Hai thuộc tính này giúp cho việc tăng tốc độ và hiệu suất của trang web. Nó cho phép chúng ta loại bỏ cơ chế Render-Blocking trong Javascript đó là việc trang web phải tải (load) và thực hiện (execute) các scripts trước khi nó hoàn thành việc render ra trang web. Dưới đây là ví dụ về cách sử dụng 2 thuộc tính này:

<script defer src="/js/jquery.min.js">
</script>

<script async src="/js/extras.min.js">
</script>

Async và Defer

Với Async, các file sẽ được tải xuống một cách bất đồng bộ và được thực thi ngay sau khi nó vừa được tải xuống (downloaded).

Với Defer, các file cũng sẽ được tải xuống bất đồng bộ, nhưng chỉ được thực thi sau khi Document đã được Parse. Với Defer, scripts sẽ được thực thi theo đúng như thứ tự mà chúng được gọi. Điều này làm cho thuộc tính Defer trở thành lựa chọn khi bạn muốn một script nào đó sẽ được thực thi dựa vào một script khác. Ví dụ, như khi bạn muốn sử dụng Jquery cũng như các scripts khác dựa trên nó, hãy sử dụng thuộc tính Defer trên chúng bao gồm cả Jquery, và chắc chắn là bạn phải gọi Jquery trước tất cả các scripts dựa trên nó. Lưu ý: Defer chỉ áp dụng cho các external scripts, nghĩa là nếu thẻ <script> không có thuộc tính src thì Defer sẽ không có tác dụng.

Đối với Async thì bạn nên dùng nó ngay khi có thể, còn Defer thì bạn chỉ nên dùng khi đã xác định được thứ tự thực thi các scripts.

1 nhận xét về “Loại bỏ Render-Blocking trong Javascript với Async và Defer”

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *