Khi nào cần sử dụng async và defer trong javascript?

{{FormatNumbertoThousand(model.total_like)}} lượt thích
997 lượt xem
Javascript
<html>  
<head></head>  
<body>  
    <script src="script.js">
</body>  
</html>

Với thẻ script không có thuộc tính gì khác thì HTML file sẽ được parse cho đến khi gặp phải thẻ script, đến lúc này thì quá trình parse sẽ tạm dùng và để fetch script file về (nếu là external file), sau đó execute những code script này, sau đó mới tiếp tục lại quá trình parse html.

<script async src="script.js">

Với thẻ script có thuộc tính async, khi quá trình parse html gặp phải script này, nó sẽ vẫn tiếp tục parse html cho đến khi script này được download xong, thì quá trình parse html mới tạm dừng để execute những code script này, sau đó lại tiếp tiếp quá trình parse html.

<script defer src="script.js"> 

Với thẻ script có thuộc tính defer, quá trình parse html sẽ không bị dừng lại mà parse cho đến khi hoàn thành, quá trình download các script file được tiến hành song song, và cuối cùng thì sẽ execute những script code này khi html đã parse xong.

Việc hiểu rõ tính chất, nguyên lý của 2 thuộc tính trên sẽ giúp biết rõ nên sử dụng chúng trong từng trường hợp cụ thể nào. Một số gợi ý:

  • 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.
Câu hỏi tiếp theo: Làm sao để clone một mảng?
{{login.error}}