Có phải việc đặt Javascript ở phía dưới cùng đã đánh bại mục đích của document. Yet?

Tôi biết rằng nên đặt Javascript ở cuối trang, nhưng nếu tôi đang sử dụng jQuery thì điều này không thành công khi chạy DOM khi tải?

Ví dụ: nếu tôi có menu thả xuống, danh sách thả xuống sẽ không hiển thị cho đến khi tất cả phần còn lại của trang được tải. Tôi cũng cố gắng phát triển với ý tưởng nâng cao lũy tiến, vì vậy tôi có thể có các yếu tố được ẩn bằng jQuery thay vì CSS (để người dùng không phải là người dùng JS có thể thấy chúng).

Có một phương tiện hạnh phúc, có lẽ?

Document. Yet đợi DOM tải trước khi chạy bất kỳ JavaScript nào (http://www.learningjquery.com/2006/09/int sinhing-document-yet).

Ý tưởng đặt nó ở dưới cùng, có nghĩa là nếu JS của bạn gặp sự cố hoặc người đó có kết nối chậm, phần còn lại của trang vẫn tải trước và không "treo".

JS vẫn chạy khi mọi thứ đã được tải, cho dù là lúc bắt đầu hay kết thúc.

Đặt javascript ở dưới cùng có nghĩa là nội dung trang khác (đặc biệt là văn bản) tải trước javascript để người dùng không chờ đợi JS tải nếu họ có kết nối chậm.

Điều này không ảnh hưởng đến document. Yet, vì nó được gọi khi trình duyệt đã chuẩn bị xong DOM cho một trang. Dù bằng cách nào, mọi thứ vẫn cần được tải trước.

Tập lệnh không được sử dụng thực tế cho đến khi HTML tải xong - tập lệnh không thể thay đổi DOM cho đến khi HTML được tải. document.readychờ DOM tải. Vì vậy, không có lý do gì nó giữ những thứ quan trọng như bảng định kiểu.

Đặt các tập lệnh ở dưới cùng của trang (trước </body>thẻ) để đặt hàng để đưa HTML và CSS của bạn đến người dùng nhanh nhất có thể. Trình duyệt sẽ có thể hiển thị trang nhanh hơn nhiều và sau đó các tập lệnh có thể được tải, thay vì để lại một trang trống để người dùng nhìn chằm chằm trong khi họ chờ tập lệnh tải xuống.

Mặc dù trình duyệt đang hiển thị trang liên tục, nhưng nếu nó chạm vào thẻ script (tức là tệp Javascript bên ngoài) thì mọi thứ đều dừng lại . Các tập lệnh có quyền - trong khi tập lệnh đang tải xuống, trình duyệt sẽ không bắt đầu bất kỳ tải xuống nào khác. tức là Hình ảnh và bảng định kiểu và mọi tải xuống song song khác sẽ bị chặn, ngay cả trên các tên máy chủ khác nhau.

Nhược điểm của việc đặt tập lệnh ở cuối trang là vì trang sẽ hiển thị trước khi tập lệnh được khởi chạy, đặc biệt là các trình nhấp nhanh sẽ có thể tương tác với trang web của bạn trước khi Javascript sẵn sàng.

Lưu ý: Điều ngược lại là đúng đối với Biểu định kiểu - Biểu định kiểu gần cuối trang kết xuất khối liên tục cho đến khi tất cả các bảng định kiểu đã được tải xuống và di chuyển chúng vào tài liệu HEADgiúp loại bỏ sự cố.

Có một mẹo gọn gàng để tải javascript mà không khiến người dùng phải chờ đợi, bạn có thể tạo một <script/>phần tử bằng createElement()phương thức DOM và thêm nó vào trang ngay trước </body>thẻ đóng :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Trình duyệt không bắt đầu tải xuống tập lệnh js cho đến khi <script/>phần tử mới thực sự được thêm vào trang. Khi quá trình tải xuống hoàn tất, trình duyệt sẽ diễn giải mã Javascript có trong.

Vâng. Nếu bạn đặt các tập lệnh ở dưới cùng, doc.ready( DOMContentLoadedsự kiện) không còn cần thiết nữa - tập lệnh của bạn sẽ được thực thi sau khi tất cả DOM tiền xử lý được tải bằng mọi cách.

Vì các tập lệnh ở cuối cải thiện hiệu suất (phân tích cú pháp HTML và tải CSS và hình ảnh không bị chặn bởi các tập lệnh), tôi khuyên bạn nên đặt các tập lệnh ở phía dưới thay vì sử dụng doc.ready.