Nên đặt File Javascript Ở Đâu Trong Trang HTML?

Nên đặt File Javascript Ở Đâu Trong Trang HTML?


Ngày 13 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu nên đặt vị trí file javascript ở đâu tối ưu nhất và các thuộc tính async, defer cho trang web nha.

Nên đặt Javascript Ở Đâu Trong Trang HTML?

Trước khi đi vào tìm hiểu cách đặt ví trí javascript thì bạn nên biết cách mà trình duyệt tải trang web của chúng ta như thế nào. Sau đây mình sẽ liệt kê các bước load javascrit trongwebsite trên browser nha.

Cách Browser Load Javascript Trong Trang Web

  • Khi nhập url trên thanh địa chỉ thì yêu cầu sẽ được gửi tới server để xử lý.
  • Sau khi xử lý xong thì server sẽ gửi lại trang HTML.
  • Tiếp theo nó sẽ fetch trang HTML (Ví dụ niemvuilaptrinh.html).
  • Sau đó bắt đầu parsing(phân tích cú pháp) HTML
  • Khi đi đến các thẻ <script> thì trình duyệt sẽ ngưng phân tích cú pháp HTML mà chuyển sang xử lý các file js này trước.
  • Sau khi tải xong các file js này thì chúng sẽ thực thi các hàm trong các file javascript.
  • Cuối cùng chúng mới tiếp tục parsing HTML.
Chạy File JS In HTML

Như vậy chúng ta có thể hiểu là các script js sẽ làm chậm quá trình tải trang cho web từ đó gây ảnh hưởng nghiêm trọng đến trải nghiệm người dùng.

Tại Sao Phải Cần Chờ Tải Javascript?

Có lẽ bạn sẽ thắc mắc tại sao trình duyệt phải chờ để tải và thực thi javascript rồi mới tiếp tục phân tích cú pháp HTML?
Bởi vì đối với js nó cho phép bạn có thể tạo và tương tác với các phần tử trong DOM. Do đó trình duyệt phải chờ để xây dựng DOM hoàn chỉnh rồi mới đưa trang HTML hiển thị cho người dùng.

Nên Đặt File JS Ở Đâu?

Thông thường chúng ta có thể đặt file js ở bất kỳ đầu trong trang HTML. Tuy nhiên để caiar thiện hiệu suát cho trang web thì mình khuyên bạn nên đật tệp Javascript ở cuối thẻ <body>. Còn đối với các tệp js quan trọng và cần thực thi ngay thì bạn nên đặt trong <head> tag.

Sử Dụng Async Và Defer

Đối với các trình duyệt hiện đại ngày nay thì hỗ trợ chúng ta hai thuộc tính asyncdefer để tải file javascript hiệu quả hơn nhằm giảm thời gian tải trang cho website.

Async Là Gì?

Thuộc tính async cho phép bạn có thể vừa phân tích cú pháp HTML vừa tải file js. Tuy nhiên quá trình parsing HTML sẽ ngừng lại khi tệp javascript được tải xong. Sau khi các hàm js được thực hiện xong thì mới tiếp tục parsing HTML.

Thuộc Tính Async JS

Còn dưới đây là cú pháp nha:

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

Defer Là Gì?

Thuộc tính defer sẽ cho phép chúng ta vừa download file js vừa parsing HTML. Tuy nhiên điểm khác biệt chính của nó với thuộc tính async là mặc dù file js đã tải xong nhưng vẫn phải chờ quá trình phân tích cú pháp HTML thực hiện hoàn tất rồi sau đó mới thực thi file js.

Thuộc Tính Defer JS

Còn dưới đây là cú pháp nha:

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

Vậy chúng ta nên sử dụng:

  • async: cho các file js quan trọng cần xử lý trước hay các mo đun javascript.
  • defer: cho các tệp javascript ít quan trọng. Tuy nhiên đối với các trình duyệt từ IE9 trở xuống thì bạn không nên sử dụng thuộc tính này nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách đặt file js trong html cũng như giải thích vè hai thuộc tính async, defer cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!