async và defer trong Javascript


Một ngày nọ, bạn vô tình hay hữu ý lượm nhặt source code HTML của 1 trang web bằng cách Ctrl + U hoặc F12 làm mấy trò linh tinh gì đó, bạn thấy

<script async type="text/javascript" src="//myscript.js"></script>

Hoặc

<script defer type="text/javascript" src="//myscript.js"></script>

Vậy thuộc tính asyncdefer kia làm gì vậy?

Khi bạn tải Javascript theo cách thông thường, trình duyệt sẽ đọc trang web của bạn theo thứ tự từ trên xuống dưới, nếu gặp phải các đoạn mã JavaScript thì trình duyệt sẽ ngừng load HTML và xử lý code bên trong cho đến khi kết thúc thì mới tiếp tục tải tiếp.

execution2

Nếu bạn sử dụng thuộc tính async trong khi tải JavaScript, khi trình duyệt đụng phải đoạn code load JavaScript thì HTML bên dưới vẫn tiếp tục tải, đồng thời JavaScript vẫn được tải cùng lúc, cho đến khi nội dung của JavaScript được tải xong thì các lệnh bên trong sẽ được thực thi, không phụ thuộc vào vị trí thứ tự bạn tải JavaScript trong website của bạn. Trong quá trình các lệnh JavaScript được thực thi thì HTML sẽ tạm ngừng tải cho đến khi JavaScript chạy xong.

Nếu bạn sử dụng thuộc tính defer trong khi tải JavaScript, khi trình duyệt đụng phải đoạn code load JavaScript thì HTML bên dưới vẫn tiếp tục tải, đồng thời JavaScript vẫn được tải cùng lúc. Các lệnh bên trong tập tin JavaScript sẽ không được chạy cho đến khi HTML được tải xong.

Như vậy, cả 2 thuộc tính asyncdefer đều có cách thức tải giống nhau, đều tải đồng thời với các thẻ HTML khác. Chỉ khác là thời gian thực thi, async thì được thực thi ngay sau khi JavaScript được tải xong (cho dù HTML có được tải xong hết hay chưa, trong quá trình JavaScript được thực thi thì HTML bên dưới sẽ ngừng tải), trong khi defer thì các lệnh được chạy chỉ khi HTML đã được tải xong.

Khi nào nên dùng async và defer?

Qua nội dung giới thiệu bên trên, bạn có thể hiểu được cách thức hoạt động của async và defer rồi. Việc quan trọng của bạn là phải biết khi nào bạn nên dùng async, khi nào nên dùng defer.

  • Nếu script của bạn là một module nào đó, chạy độc lập và không phụ thuộc vào bất kỳ script nào khác thì dùng thuộc tính async.
  • Nếu script của bạn phụ thuộc vào một script khác hoặc được một script khác sử dụng lại (phụ thuộc vào) thì nên sử dụng thuộc tính defer.
  • Nếu script của bạn nhỏ chỉ có vài dòng code thì xuất ngay các đoạn code vào bên trong thẻ script luôn (inline script), đừng tạo file JavaScript độc lập và không dùng 2 thuộc tính kia.
  • Nếu script của bạn nhỏ như bên trên (ít code), và được một script khác sử dụng thuộc tính async phụ thuộc vào thì xuất script theo kiểu inline và đặt trước đoạn script async.

Để cho bạn dễ hình dung và có thể hiểu được cách thức hoạt động của asyncdefer, bạn có thể tham khảo như hình ảnh mình gửi bên dưới.

Cách tải và thực thi JavaScript

Đối với các trình duyệt cũ, bạn có thể sử dụng kết hợp cả asyncdefer trong khi load script để phòng ngừa trường hợp trình duyệt không hiểu thuộc tính async. Đó là đối với các thuộc tính bạn quyết định dùng async thì nên bỏ thêm defer vào, nhưng nếu bạn không quan trọng tới vấn đề lỗi hiển thị trên trình duyệt cũ thì bạn không cần quan tâm tới điều này.

Chúng ta dùng thuộc tính async như thế nào?

<script async type="text/javascript" src="//myscript.js"></script>

hoặc:

<script async="true" type="text/javascript" src="//myscript.js"></script>

Lưu ý rằng:

<script async="false" type="text/javascript" src="//myscript.js"></script>

Cũng là sử dụng thuộc tính async, nếu không dùng thuộc tính này, ta phải bỏ nó hoàn toàn khỏi thẻ script, chứ cho nó giá trị là true, false hay nội dung bất kỳ đều là sử dụng nó. Miễn nó có mặt là sử dụng nó rồi .
Ngoài ra, thuộc tính này thuộc về HTML5 nên nó chỉ có tác dụng trên các trình duyệt hỗ trợ HTML5 mà thôi, nếu người dùng dùng trình duyệt đời cũ thì thuộc tính này cũng chẳng có tác dụng gì.

Nguồn: hocwp.net

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s