Defer và async hiệu quả khi load javascript

Nội dung bài viết

Rất tiếc cho bạn nào đặt script xuống cuối trang, ngay trước thẻ </body> và nói là rất ổn. Và bài này mình nói nhanh qua về một thủ thuật nhỏ nhưng hiệu quả. Và mình mong rằng bài viết này không mới đối với các bạn. Nếu nó mới với bạn thì bạn đã hổng kiến thức rất nhiều. 

Đầu tiên các bạn phải hiểu khi tải tập lệnh trên trang HTML, bạn cần cẩn thận để không làm tổn hại đến hiệu suất tải của trang. Tùy thuộc vào vị trí và cách bạn thêm tập lệnh của mình vào trang HTML sẽ ảnh hưởng đến thời gian tải. 

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Cộng đồng giới thiệu bài viết, website, sản phẩm tăng traffic.

Theo truyền thống câu lệnh sẽ như cách này.

<script src="script.js"></script>

Bất cứ khi nào HTML parser tìm thấy dòng code trên nó sẽ tải xuống và thự thi script đó. Mỗi lần load như vậy thì HTML trong trang sẽ được phân tích cho nên nó tốn rất nhiều thời gian và ảnh hưởng rất lớn tới việc load trang. Nếu việc load script mất nhiều thời gian hơn, ví dụ khi mạng chậm thì việc chờ load xong script thì phần còn lại của HTML trên page mới được render thì người dùng sẽ nhìn thấy một trang trống không. Việc này rất khó chịu với việc trải nghiệm.


1. Vị trí đặt thẻ <script>

<html>
  <head>
    <title>Title</title>
    <script src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Quên cách này đi. Điều này không tốt vì phải chờ script executed. Và thời đại tiên tiến chúng ta có thể giải quyết được vấn đề này là đặt nó cuối trang.

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    ...
    <script src="script.js"></script>
  </body>
</html>

Liệu nó tối ưu chưa? Câu trả lời là ok, nhưng còn một cách khác ngon hơn nữa.

2. Async and Defer

Cả async và defer đều là các thuộc tính boolean. Cách sử dụng của chúng là tương tự nhau: 

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

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

Các attribute này chỉ có ý nghĩa khi sử dụng tập lệnh trong <head> của trang và chúng sẽ vô dụng nếu bạn đặt tập lệnh vào phần </body> như chúng ta đã thấy ở trên. 

3. So sánh hiệu suất

a. Không async và defer, đặt trong <head> 

b. Không async và defer, đặt trong <body>

c. Dùng async, đặt trong <head> 

d. Dùng defer, đặt trong <head> 

Thông qua các hình ảnh các bạn cũng đã thấy cách nào là tối ưu rồi chứ? 

4. Kết luận. 

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Cộng đồng giới thiệu bài viết, website, sản phẩm tăng traffic.

Điều tốt nhất cần làm để tăng tốc độ tải trang của bạn khi sử dụng tập lệnh là đặt chúng vào thẻ <head> và thêm thuộc tính defer vào thẻ script của bạn:

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

Trừ khi bạn đã ổn định với tốc đọ load trang của bạn, còn không hãy thay đổi và sử dụng theo cách này. 

Source: EFFICIENTLY LOAD JAVASCRIPT WITH DEFER AND ASYNC