Hướng dẫn where should i store javascript scripts? - tôi nên lưu trữ tập lệnh javascript ở đâu?

Question

Đây là những gì xảy ra khi trình duyệt tải một trang web có thẻ <script> trên đó:

Nội dung chính Show

Tại sao điều này thậm chí xảy ra?
Khuyến nghị cổ xưa
Cách tiếp cận hiện đại
không đồng bộ
hoãn lại
Sự kết luận
Người giới thiệu
Tôi nên lưu trữ các tệp javascript ở đâu?
Đâu là nơi tốt nhất để đặt thẻ script?
Kịch bản nên ở trong đầu hay cơ thể?
Tôi có nên đặt JavaScript vào một tệp riêng không?

Tìm nạp trang HTML (ví dụ: index.html)
Bắt đầu phân tích HTML
Trình phân tích cú pháp gặp một thẻ <script> tham chiếu một tệp tập lệnh bên ngoài.
Trình duyệt yêu cầu tệp tập lệnh. Trong khi đó, các khối phân tích cú pháp 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 tồi. 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, 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 mình 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 và thực thi trước khi nó có thể phân tích lại phần còn lại của tài liệu. Rốt cuộc, kịch bản có thể đã chèn HTML của riêng mình 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ác 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ụ:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

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";
});

Bởi 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ổ xưa

Cách tiếp cận cũ để giải quyết vấn đề này là đặt các thẻ <script> ở dưới cùng của <body> của bạn, bởi vì điều này đảm bảo trình phân tích cú pháp không bị chặn cho đến khi kết thúc.

Cách tiếp cận này có vấn đề riêng: 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 các tập lệnh và bảng 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ẽ truy cập một 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 các tập lệnh của bạn càng sớm càng tốt, đồng thời phân tích phần còn lại tài liệu còn lại của bạn.

Cách tiếp cận hiện đại

Ngày nay, các trình duyệt hỗ trợ các thuộc tính async và

// 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";
});

0 trên các tập lệnh. Các thuộc tính này cho biết trình duyệt, 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ộ

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>

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 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 có thể tập lệnh 2 được tải xuống và thực thi trước tập lệnh 1.

Theo http://caniuse.com/#feat=script-async, 97,78% của tất cả các trình duyệt hỗ trợ điều này.

hoãn lại

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

Các tập lệnh với thuộc tính trì hoãn được thực thi theo thứ tự (nghĩa là tập lệnh đầu tiên 1, sau đó 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 http://caniuse.com/#feat=script-defer, 97,79% của tất cả các trình duyệt hỗ trợ điều này. 98,06% 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 của trình duyệt: Trong một số trường hợp, Internet & nbsp; Explorer 9 trở lên có thể thực hiện các tập lệnh được hoãn lại theo thứ tự. Nếu bạn cần hỗ trợ các trình duyệt đó, xin vui lòng đọc điều này trước!

.

Sự kết luận

Trạng thái hiện tại là đặt các tập lệnh vào thẻ

// 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";
});

1 và sử dụng các thuộc tính async hoặc

// 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";
});

0. Điều này cho phép các tập lệnh của bạn được tải xuống càng sớm càng tốt mà không chặn trình duyệt của bạn.

Điều tốt là trang web của bạn vẫn nên tải chính xác vào 2% trình duyệt không hỗ trợ các thuộc tính này trong khi tăng tốc 98% khác.

Người giới thiệu

Thuộc tính Async vs Defer
Tải JavaScript hiệu quả với Defer và Async
Loại bỏ kết xuất chặn JavaScript
Async, trì hoãn, mô -đun: một trò gian lận trực quan

Tôi nên lưu trữ các tệp javascript ở đâu?

JavaScript trong cơ thể hoặc đầu: Các tập lệnh có thể được đặt bên trong cơ thể hoặc phần đầu của trang HTML hoặc bên trong cả đầu và cơ thể. JavaScript trong đầu: Chức năng JavaScript được đặt bên trong phần đầu của trang HTML và hàm được gọi khi nhấp vào nút.inside the body or the head section of an HTML page or inside both head and body. JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.

Đâu là nơi tốt nhất để đặt thẻ script?

Thẻ tập lệnh phải luôn được sử dụng trước khi phần thân đóng hoặc ở dưới cùng trong tệp HTML.Trang sẽ tải với HTML và CSS và JavaScript sau này sẽ tải.before the body close or at the bottom in HTML file. The Page will load with HTML and CSS and later JavaScript will load.

Kịch bản nên ở trong đầu hay cơ thể?

Cách thực hành tốt nhất là đặt các thẻ JavaScript ngay trước thẻ đóng chứ không phải trong phần HTML của bạn.Lý do cho điều này là HTML tải từ trên xuống dưới.Đầu tải trước, sau đó là cơ thể, và sau đó mọi thứ bên trong cơ thể.. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.

Tôi có nên đặt JavaScript vào một tệp riêng không?

Nếu bạn chỉ có một vài dòng mã dành riêng cho một trang web cụ thể, thì tốt hơn là giữ mã JavaScript của bạn trong nội bộ trong tài liệu HTML của bạn.Mặt khác, nếu mã JavaScript của bạn được sử dụng trong nhiều trang web, thì bạn nên xem xét việc giữ mã của mình trong một tệp riêng.if your JavaScript code is used in many web pages, then you should consider keeping your code in a separate file.

programming javascript HTML JavaScript Script> tag HTML Script src script type= text/javascript