Thẻ script có thể được đặt ở đầu trong tài liệu html
Nên đặt thẻ ở đâu trong HTML
Khi học về cách nhúng mã JavaScript từ tập tin bên ngoài vào trang HTML thì em thấy nhiều tài liệu hướng dẫn nên đặt thẻ
Tuy nhiên ở một số tài liệu lại để một số thẻ
Như vậy thì nên đặt thẻ
Đây là những gì xảy ra khi một trình duyệt tải một trang web với một
- Tìm nạp trang HTML [ví dụ: index.html]
- Bắt đầu phân tích cú pháp HTML
- Trình phân tích cú pháp gặp một
- Trình duyệt yêu cầu tệp script.
Trong khi đó, trình phân tích cú pháp chặn và dừng phân tích cú pháp HTML khác trên trang của bạn.
- Sau một thời gian, tập lệnh được tải xuống và sau đó được thực thi.
- Trình phân tích cú pháp tiếp tục phân tích phần còn lại của tài liệu HTML.
Bước # 4 gây ra trải nghiệm người dùng xấu. Trang web của bạn về cơ bản dừng tải cho đến khi bạn đã tải xuống tất cả các tập
lệnh. Nếu có một điều mà người dùng ghét thì nó đang chờ một trang web tải.
Tại sao điều này thậm chí xảy ra?
Bất kỳ tập lệnh nào cũng có thể chèn HTML của riêng nó thông qua document.write[]hoặc các thao tác DOM khác. Điều này ngụ ý rằng trình phân tích cú pháp phải đợi cho đến khi tập lệnh được tải xuống & thực thi trước khi nó có thể phân tích cú pháp phần còn lại của tài liệu một
cách an toàn. Rốt cuộc, tập lệnh có thể đã chèn HTML của chính nó vào tài liệu.
Tuy nhiên, hầu hết các nhà phát triển JavaScript không còn thao túng DOM trong khi tài liệu đang tải. Thay vào đó, họ đợi cho đến khi tài liệu đã được tải trước khi sửa đổi nó. Ví dụ:
My Page
Welcome back, user
Javascript:
// my-script.js
document.addEventListener["DOMContentLoaded", function[] {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById["user-greeting"].textContent = "Welcome back, Bart";
}];
Vì trình duyệt của bạn không biết my-script.js sẽ không sửa đổi tài liệu cho đến khi nó được tải xuống và thực thi, trình phân tích cú pháp dừng phân tích cú pháp.
Khuyến nghị cổ
Cách tiếp cận cũ để giải quyết vấn đề này là đặt
Cách tiếp cận này có vấn đề riêng của nó: trình duyệt không thể bắt đầu tải xuống các tập lệnh cho đến khi toàn bộ tài liệu được phân tích cú pháp. Đối với các trang web lớn hơn với tập lệnh & bảng định kiểu lớn, việc có thể tải xuống tập lệnh càng sớm càng tốt là rất quan trọng đối với hiệu suất. Nếu trang web của bạn không tải trong vòng 2 giây, mọi người sẽ chuyển đến trang web khác.
Trong một
giải pháp tối ưu, trình duyệt sẽ bắt đầu tải xuống tập lệnh của bạn càng sớm càng tốt, đồng thời phân tích cú pháp phần còn lại của tài liệu.
Cách tiếp cận hiện đại
Ngày nay, các trình duyệt hỗ trợ asyncvà defercác thuộc tính trên các tập lệnh. Các thuộc tính này cho trình duyệt thấy an toàn khi tiếp tục phân tích cú pháp trong khi các tập lệnh đang được tải
xuống.
không đồng bộ
Các tập lệnh với thuộc tính async được thực thi không đồng bộ. Điều này có nghĩa là tập lệnh được thực thi ngay khi được tải xuống mà không chặn trình duyệt trong lúc này.
Điều này ngụ ý rằng tập lệnh 2 có thể được tải xuống và thực thi trước tập lệnh 1.
Theo
//caniuse.com/#feat=script-async , 94,57% tất cả các trình duyệt hỗ trợ điều này.
hoãn lại
Các tập lệnh với thuộc tính defer được thực thi theo thứ tự [tức là tập lệnh đầu tiên 1, sau đó là tập lệnh 2]. Điều này cũng không chặn trình duyệt.
Không
giống như các tập lệnh async, các tập lệnh trì hoãn chỉ được thực thi sau khi toàn bộ tài liệu đã được tải.
Theo //caniuse.com/#feat=script-defer , 94,59% tất cả các trình duyệt hỗ trợ điều này. 94,92% hỗ trợ nó ít nhất một phần.
Một lưu ý quan trọng về khả năng tương
thích trình duyệt: trong một số trường hợp, IE