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

Tìm hiểu cách sử dụng HTML <script> phần tử.

HTML <script> phần tử được sử dụng để thêm mã JavaScript vào tài liệu của bạn.

Với <script> bạn có thể thêm JavaScript theo hai cách khác nhau:

Bạn có thể nhúng mã JavaScript nội tuyến, ngay bên trong tài liệu của mình.
Hoặc nhập / tải tệp JavaScript bên ngoài (.js ).

Vì vậy, vấn đề là tải JavaScript bên trong so với bên ngoài.

Hãy xem xét cả hai tùy chọn.

JavaScript nội tuyến

Để nhúng nội dòng mã JavaScript của bạn, bạn xác định thẻ tập lệnh mở và đóng, và đặt mã JS bên trong:

<script>
  // Add your JavaScript code here
</script>

<script> sau đó có thể đưa phần tử vào bên trong <head> trong tài liệu của bạn phần tử:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // Add your JavaScript code here
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Hoặc bên ngoài <head> , ngay trước phần tử </body> đóng thẻ phần tử:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script>
      // Add your JavaScript code here
    </script>
  </body>
</html>

Vậy sự khác biệt giữa việc đặt JavaScript trong <head> so với <body> ?

Sự khác biệt là hiệu suất. Và nó có thể là một lớn sự khác biệt.

Theo mặc định, tài liệu HTML và các phần tử của chúng được phân tích cú pháp (đọc) và hiển thị từ trên xuống dưới. Khi bạn tải và chạy mã JavaScript trong <head> , kết xuất của phần còn lại phần tử trang của bạn (nội dung hiển thị của bạn) bị chặn cho đến khi tập lệnh được phân tích cú pháp và chạy xong mã của nó.

Việc thực thi một tệp JavaScript có thể mất vài mili giây (mili giây) hoặc vài giây, tùy thuộc vào kích thước và loại mã bạn đang thực thi. Vì vậy, nó có thể trì hoãn thời gian trước khi trang của bạn trở nên tương tác (có thể sử dụng được) với người dùng.

Bằng cách đặt mã JavaScript của bạn ở dưới cùng (ngay trước </body> ), mã JavaScript sẽ không tải và thực thi cho đến sau tất cả nội dung trang của bạn được hiển thị và hiển thị cho người dùng. Điều này tránh chặn nội dung trang và do đó người dùng có thể tương tác với trang web sớm hơn.

Được rồi, bây giờ bạn đã biết cách nhúng mã JavaScript nội tuyến và cách thực hiện nó theo cách hiệu quả nhất.

Bây giờ, hãy xem xét cách nhập mã JavaScript bên ngoài và mã này khác với JavaScript nội bộ (nội tuyến) như thế nào.

Nhập tệp JavaScript bên ngoài

Để tải mã JavaScript bên ngoài, bạn phải nhập mã đó qua tệp có .js gia hạn. Ví dụ. main.js .

Nó hoạt động như thế này:

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

Và cũng giống như với JavaScript nội tuyến, bạn có thể đặt nó vào bên trong <head> của mình phần tử:

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

Hoặc ngay trước thẻ phần tử nội dung đóng </body> :

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

Thuộc tính defer

Với Javascript hiện đại, còn có hiệu suất cao hơn nữa cách thực hiện chạy các tập lệnh bên ngoài của bạn hơn là tải nó ở cuối trang của bạn.

Chúng ta có thể sử dụng defer thuộc tính trên <script> các phần tử:

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

Và sau đó đặt nó bên trong <head> của bạn phần tử:

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

Với defer này cách tiếp cận, mã JavaScript của bạn được tải (không được thực thi) while mã HTML của bạn đang phân tích cú pháp, nhưng nó không thực thi cho đến sau HTML được phân tích cú pháp xong.

Nếu tập lệnh bên ngoài của bạn được đặt ở dưới cùng (ngay trước </body> ), điều này xảy ra:

Đầu tiên, mã HTML phân tích cú pháp
Sau đó, HTML hiển thị
Sau đó, mã JavaScript được tải
Sau đó, mã JavaScript được thực thi

Với defer chúng tôi đang tải mã JavaScript while HTML đang phân tích cú pháp (song song), vì vậy ngay sau khi HTML của bạn hoàn tất, mã JavaScript đã được tải và sẵn sàng thực thi.

Tại sao điều này tốt hơn? Nó không nhất thiết phải luôn tốt hơn. Nhưng nhiều trang web dựa vào JavaScript để hoạt động ngay lập tức, ngay khi trang trở nên tương tác (người dùng có thể sử dụng được) - và cách tiếp cận này có thể giúp trang web của bạn sẵn sàng tương tác nhanh hơn nhiều.

Sẽ không sao nếu bạn không hiểu đầy đủ về defer này ngay bây giờ, bạn sẽ có một số kinh nghiệm thực tế về nó.

Điều quan trọng nhất cần biết rằng đó là nói chung cách hiệu quả nhất để chạy mã JavaScript trên trang web của bạn.

Điều cần biết:

Bạn chỉ có thể sử dụng defer thuộc tính trên các tệp JavaScript bên ngoài - không phải trên mã JavaScript nội tuyến.
Khi nhập các tập lệnh bên ngoài, bạn cần chỉ định đường dẫn nguồn tương đối, vì vậy nếu JavaScript của bạn main.js tệp nằm trong thư mục có tên js , bên trong thư mục dự án gốc của bạn, bạn nhập nó như thế này src="/js/main.js"
Đôi khi bạn sẽ thấy <script> các phần tử có mã nhận dạng ngôn ngữ, bằng cách sử dụng type thuộc tính <script type="text/javascript"> Trong HTML5 (phiên bản mới nhất), bạn không còn phải thực hiện việc này nữa vì nó đã được đặt theo mặc định.