Bài viết được dịch từ nguồn: //eager.io/blog/everything-I-know-about-the-script-tag/
Như các bạn đã biết, thẻ được dùng để xác định mã JavaScript cần được chạy trên một trang web. Một thẻ script có thể bao gồm các đoạn mã JavaScript trực tiếp hoặc sẽ trỏ tới một url chứa mã JavaScript.
Các thẻ script được thực hiện theo thứ tự chúng xuất hiện
var x = 3;
alert[x];
// Will alert '3';
Điều đó cũng tương tự với những tài nguyên bên ngoài
Trình tự thực hiện trên cũng đúng trong trường hợp chúng ta sử dụng kết hợp các tài nguyên local hoặc tài nguyên được tham chiếu từ địa chỉ khác.
Về mặt chức năng, điều này có nghĩa rằng bạn có thể làm chậm trang web của bạn đáng kể nếu nhưng bạn có những đoạn mã thực hiện chậm ở phần đầu trang web. Nó cũng có nghĩa rằng những đoạn mã xuất hiện ở phía cuối trang web có thể phụ thuộc vào những đoạn mã trước đó đã được thực hiện xong.
Các phần tử trên trang web sẽ không được thể hiện cho tới khi tất cả các thẻ script đứng trước đó đã được nạp và thực thi. Tức là là bạn có thể làm tất cả làm bất cứ việc gì trước khi trang web được tải nếu bạn sẵn sàng chấp nhận vấn đề hiệu năng thấp của trang web.
Thực tế điều này không được áp dụng, tuy nhiên nếu bạn thêm các thẻ script vào DOM sau khi trang bắt đầu tải bằng cách sử dụng document.appendChild hoặc cách nào đó tương tự. Những thẻ đó sẽ được tải bất cứ khi nào trình
duyệt thấy phù hợp và không theo thứ tự nào đặc biệt.
Khi một thẻ script được thực thi, tất cả mọi thứ trước đó ở trong DOM đều đã có sẵn [Nhưng không phải mọi thứ sau đây]
// document.head is available
// document.body is not!
// document.head is available
// document.body is available
Bạn có thể nghĩ đến việc phân tích cú pháp HTML như việc di chuyển thông qua tài liệu từng thẻ một, thực hiện bất kỳ đoạn mã JavaScript nào gặp phải. Điều này có nghĩa các nút DOM đã có sẵn đối với JavaScript [thông qua các truy vẫn querySelectorAll, jQuery, ...] chỉ khi thẻ mở của chúng xuất hiện trong tài liệu sớm hơn thẻ script.
Một hệ quả hữu ích của việc này là document.head hầu như luôn luôn có sẵn trong bất kỳ JavaScript bạn có thể viết trên trang web. document.body chỉ có sẵn nếu thẻ script của bạn xuất hiện bên trong hoặc sau thẻ mở
async and defer
HTML5 đã bổ sung thêm một cặp công cụ để kiểm soát khi các script được thực thi.
async nghĩa là "Thực hiện điều này bất cứ khi nào". Cụ thể hơn nghĩa là: "Tôi không quan tâm nếu bạn thực hiện điều này
sau khi toàn bộ trang web đã được load, và toàn bộ các script đều đã thực thi". Nó rất hữu ích cho các mã phân tích theo dõi, ví dụ, nơi không có các mã khác trên trang web phụ thuộc vào việc thực thi của chúng. Định nghĩa một biến hay hàm trong mã async mà trang web cần là không tốt vì bạn không biết khi nào mã async sẽ thực sự chạy.
defer nghĩa là "Chờ cho phân tích cú pháp kết thúc để thực hiện điều này". Nó gần tương đương với ràng buộc script của bạn với sự kiện DOMContentLoaded,
hoặc sử dụng jQuery.ready. Khi code được chạy, tất cả mọi thứ trong DOM sẽ có sẵn để sử dụng. Không giống như async, mã defer sẽ chạy theo thứ tự xuất hiện trong tài liệu HTML của trang web, nó chỉ hoãn lại cho đến sau khi HTML được phân tích đầy đủ.
Thuộc tính type
Lịch sử đã ghi nhận [từ khi có Netscape 2], không có vấn đề gì nếu bạn chỉ rõ type=”text/javascript” trong các thẻ script của mình, hoặc chỉ để trống nó. Nếu bạn thiết lập bất kỳ MIME type mặc dù nó không
phải biến thể của JavaScript thì trình duyệt sẽ không thực hiện nó. Điều này sẽ thật tuyệt khi bạn muốn xác định ngôn ngữ của bạn
make a social network
but for cats
Các hoạt động thực sự của mã code sau đó là tùy thuộc vào bạn
var codez = document.querySelectorAll['script[type="text/emerald"]'];
for [var i=0; i