it-swarm-vi.com

Có phải "đặt Javascript ở 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 mục đích 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 JS có thể nhìn thấy chúng).

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

26
DisgruntledGoat

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.

30
Callan

Đặ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.

6
Macha

Một tập lệnh không được sử dụng thực tế cho đến khi HTML tải xong - một tập lệnh có thể thay đổi DOM cho đến khi HTML được tải. document.ready chờ 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 thẻ </body>) để đặt hàng để nhận HTML và CSS của bạn cho 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 (nghĩa là tệp Javascript bên ngoài) mọi thứ dừng lại. Các tập lệnh có quyền ưu tiên - trong khi tập lệnh đang tải xuống, trình duyệt đã giành chiến thắ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 HEAD 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 phần tử <script/> bằng cách sử dụng phương thức DOM createElement() và thêm nó vào trang ngay trước khi đóng </body> nhãn:

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 phần tử <script/> 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 đó.

3
Tom

Vâng. Nếu bạn đặt các tập lệnh ở dưới cùng, doc.ready (DOMContentLoaded event) 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 trước đó được tải.

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.

1
Kornel