Trang chủTác giảLiên hệ

Async Defer — JavaScript Loading Strategies

By Nguyễn Văn Vũ
Published in Javascript
December 14, 2021
2 min read

Javascript là một trong những phần không thể thiếu của một website. Và chúng ta phải có chiến lược load những file này để tăng performance. Modern websies hiện nay, dung lượng của file js còn nặng hơn file html. Khi file html được tải về thì nó sẽ parse từ trên xuống để build DOM và khí nó gặp <script>...</script> tag thì nó sẽ không tiếp tục build DOM mà phải chạy code js ngay lúc đó. Hoặc nếu gặp (external script) <script src="..."></script> thì nó phải đợi tải file về và chạy file đó trước.

alt text alt text alt text

Ưu điểm

Code javascript đảm bảo chạy đúng trình tự được đặt trong file html. Mặc dù, file 2 được tải về trước nhưng code vẫn được thực hiện trình tự.

Nhược điểm

  • Dó khi js được chạy thì DOM vẫn chưa được tạo nên js không thể thao tác với DOM

Và để xử lý case này thì bạn dùng:

  • Có thể làm treo page vì phải đợi load xong 3 file js

alt text

Bây giờ, chúng ta sẽ cho 3 file script xuống cuối file html. Đây là cách tiếp cận cũ để đảm bảo html được parse hoàn toàn. user có thể thấy nội dung web và js code có thể tương tác với DOM. alt text

Nhưng cách tiếp cận này có vấn đề riêng của nó: browser không thể download file js cho tới khi nào toàn bộ DOM được parse. Đối với một website lớn với những file js lớn thì việc tải những file này sớm nhất có thể là quan trọng đối với performance. Vậy tốt hơn là làm sao mà vừa thực hiện tài file js mà không block việc tạo DOM.

The modern approach

Async

Ưu điểm

  • script chạy hoàn toàn độc lập không đợi script khác và cũng không đợi phải parse html xong, script2.js nếu được load về trước thì vẫn execute trước script1.js.
  • DOMContentLoaded and async scripts cũng không đợi nhau
  • async scripts tải dưới background và chạy luôn khi được tải xong.
  • async scripts phù hợp cho các thư viện như kiểu counter, ads. Nó không phụ thuộc vào script của chúng ta và chúng ta không phụ thuộc vào nó.

Nhược điểm

  • Không support ở các browser cũ như IE9 và thấp hơn. Hiện tại có 98.22% support async https://caniuse.com/script-async
  • Do nó chạy độc lập nên sẽ không đảm thứ tự execution

Defer

  • Defer script cũng gần giống như async, tải song song, không block parse html, nhưng khác là nó phải đợi html được parse thì mới được execute kể cả nó đã được tải về.
  • Và nó execute theo trình tự. small.js được tải về trước nhưng nó đợi long.js chạy xong nó mới chạy.
  • Nó có thể chạy trước DOMContentLoaded

Tham khảo: https://javascript.info/script-async-defer#defer https://medium.com/@raviroshan.talk/async-defer-javascript-loading-strategies-da489a0ba47e https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

Thanks you for reading!


Tags

JAVASCRIPT

Nguyễn Văn Vũ

Related Posts

NestJS for Beginners (Part 2)
August 09, 2021
1 min
© 2022, All Rights Reserved.

Quick Links

Liên hệ quảng cáoThông tinLiên hệ

Social Media