1. Mở lời
Trong quá trình phát triển website thì việc sử dụng các đoạn mã Javascript để tăng tính tương tác của trang web là điều cần thiết. Những trang web lớn, nhiều tính năng thì cần phải sử dụng một lượng lớn script. Điều này vô hình chung khiến cho việc tải trang web của chúng ta trở nên chậm đi.
Việc sử dụng các thuộc tính async, defer trong thẻ script sẽ giúp chúng ta tối ưu đáng kể khả năng tải trang. Để hiểu được async và defer đã làm gì, tại sao tốc độ tải trang lại nhanh hơn thì trước hết, chúng ta phải tìm hiểu cách trình duyệt tải và thực thi thẻ script thông thường.
Việc sử dụng các thuộc tính async, defer trong thẻ script sẽ giúp chúng ta tối ưu đáng kể khả năng tải trang. Để hiểu được async và defer đã làm gì, tại sao tốc độ tải trang lại nhanh hơn thì trước hết, chúng ta phải tìm hiểu cách trình duyệt tải và thực thi thẻ script thông thường.
2. Cách trình duyệt tải và thực thi thẻ script thông thường
Ví dụ về cách sử dụng thẻ script thông thường để tải đoạn mã Javascript:
Đối với cách tải thông thường này, khi trình duyệt đọc đến thẻ script thì quá parsing HTML sẽ bị chặn lại để tải và thực thi file Javascript xong, sau đó mới tiếp tục.
Đối với những file Javascript có dung lượng lớn, cần nhiều thời gian thực thi thì quá trình tải trang sẽ bị chặn khá lâu.
Đối với những file Javascript có dung lượng lớn, cần nhiều thời gian thực thi thì quá trình tải trang sẽ bị chặn khá lâu.
3. Sử dụng thuộc tính async
Ví dụ về cách sử dụng thuộc tính async trong thẻ script để tải đoạn mã Javascript:
Khi sử dụng async, quá trình tải script sẽ được tiến hành song song với quá trình parsing HTML. Sau khi script được tải xong thì quá trình parsing HTML sẽ bị chặn lại cho tới khi script thực thi xong.
Như vậy, ta đã tiết kiệm được khoảng thời gian tải script.
Như vậy, ta đã tiết kiệm được khoảng thời gian tải script.
4. Sử dụng thuộc tính defer
Ví dụ về cách sử dụng thuộc tính defer trong thẻ script để tải đoạn mã Javascript:
Tương tự async, quá trình tải script sẽ được tiến hành song song với quá trình parsing HTML điểm khác biệt ở đây là script sau khi tải xong sẽ không được thực thi ngay mà đợi đến khi quá parsing HTML kết thúc thì mới được thực thi.
5. Khả năng tương thích trên các trình duyệt
Các bạn có thể xem khả năng tương thích của thuộc tính async và defer trên các trình duyệt ở bảng sau:
6. Khi nào thì sử dụng async, defer
- Đối với những file Javascript nhỏ, tốc độ thực thi nhanh thì không cần dùng async và defer.
- Đối với những file Javascript lớn, cần thực thi luôn thì sử dụng async.
- Đối với những file javascript lớn, không cần thực thi luôn, hoặc cần đợi trình duyệt parse HTML xong thì dùng defer.