Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Cách sử dụng phần tử HTML <script>

Học cách dùng <script> HTML.

<script> thêm code JavaScript vào tài liệu.

Với <script> thêm JS 2 cách:

  • Nhúng inline trực tiếp trong tài liệu.
  • Import/load file JS ngoài (.js).

Vấn đề là load JS nội bộ vs ngoài.

Xem cả 2 tùy chọn.

JavaScript Inline

Để nhúng JS inline, định nghĩa thẻ script mở/đóng, đặt code JS bên trong:

<script> // Thêm code JS ở đây </script>

<script> có thể đặt trong <head>:

<!DOCTYPE html> <html> <head> <script> // Thêm code JS </script> </head> <body> ... </body> </html>

Hoặc ngoài <head>, trước </body>:

<!DOCTYPE html> <html> <head></head> <body> ... <script> // Thêm code JS </script> </body> </html>

Khác nhau giữa đặt JS trong <head> vs <body>?

Khác biệt là hiệu năng. Và có thể lớn.

Mặc định HTML parse và render từ trên xuống. Khi load/chạy JS trong <head>, render phần còn lại trang bị chặn cho đến khi script parse xong.

Thực thi file JS có thể mất vài ms hoặc vài giây, tùy kích thước và loại code. Có thể delay thời gian trang interactive (có thể dùng).

Đặt JS ở dưới (trước </body>), JS không load/thực thi cho đến sau khi nội dung render xong và hiển thị. Tránh chặn nội dung, người dùng tương tác sớm hơn.

Bây giờ biết nhúng inline JS và cách hiệu năng nhất.

Xem import JS ngoài, khác biệt so với inline.

Import file JavaScript ngoài

Để load JS ngoài, import qua file .js. Ví dụ main.js.

Hoạt động như sau:

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

Giống inline, đặt trong <head>:

<!DOCTYPE html> <html> <head> <script src="main.js"></script> </head> <body> ... </body> </html>

Hoặc trước </body>:

<!DOCTYPE html> <html> <head></head> <body> ... <script src="main.js"></script> </body> </html>

Thuộc tính defer

Với JS hiện đại, có cách hiệu năng hơn chạy script ngoài so với đặt cuối trang.

Dùng defer trên <script>:

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

Đặt trong <head>:

<!DOCTYPE html> <html> <head> <script defer src="main.js"></script> </head> <body> ... </body> </html>

Với defer, code JS được tải (không thực thi) khi HTML parse, nhưng không thực thi cho đến sau khi HTML parse xong.

Nếu script ngoài đặt cuối (trước </body>):

  • HTML parse
  • HTML render
  • JS load
  • JS thực thi

defer tải JS khi HTML parse (song song), nên ngay khi HTML xong, JS đã load sẵn sẵn thực thi.

Tại sao tốt hơn? Không nhất thiết luôn tốt. Nhiều web cần JS hoạt động ngay khi trang interactive — cách này làm trang sẵn sàng nhanh hơn.

Không sao nếu chưa hiểu hết defer, sẽ hiểu khi có kinh nghiệm.

Quan trọng: thông thường cách hiệu năng nhất chạy JS trên web.

Tốt để biết:

  • Chỉ dùng defer trên file JS ngoài — không dùng cho inline JS.
  • Import script ngoài, chỉ định đường dẫn tương đối, nếu main.js trong thư mục js gốc project, import src="/js/main.js"
  • Thấy <script> có language identifier, dùng type="text/javascript". HTML5 (phiên bản mới) không cần, mặc định đã đặt.