sự khác biệt / lợi thế / bất lợi của việc viết script ở cuối trang và viết script ở
$(document).ready(function(){});Câu trả lời:
Về bản chất, rất ít, cả hai cách DOM sẽ sẵn sàng cho bạn hoạt động (Tôi đã rất lo lắng về điều đó cho đến khi tôi đọc được điều này từ Google ). Nếu bạn sử dụng thủ thuật cuối trang, mã của bạn có thể được gọi sớm hơn một chút, nhưng không có gì quan trọng. Nhưng quan trọng hơn, sự lựa chọn này liên quan đến nơi bạn liên kết JavaScript của mình vào trang.
Nếu bạn đưa scriptthẻ của mình vào headvà dựa vào ready, trình duyệt sẽ gặp scriptthẻ của bạn trước khi nó hiển thị bất kỳ thứ gì cho người dùng. Trong quá trình bình thường của các sự kiện, trình duyệt dừng lại và tải xuống tập lệnh của bạn, kích hoạt trình thông dịch JavaScript và giao tập lệnh cho nó, sau đó đợi trong khi trình thông dịch xử lý tập lệnh (và sau đó jQuery xem theo nhiều cách khác nhau để DOM sẵn sàng). (Tôi nói "trong quá trình bình thường của mọi thứ" bởi vì một số trình duyệt hỗ trợ asynchoặcdefer thuộc tính trên scriptthẻ.)
Nếu bạn bao gồm scriptthẻ của mình ở cuối bodyphần tử, trình duyệt sẽ không thực hiện tất cả những điều đó cho đến khi phần lớn trang của bạn đã được hiển thị cho người dùng. Điều này cải thiện thời gian tải cảm nhận cho trang của bạn.
Vì vậy, để có được thời gian tải tốt nhất, hãy đặt tập lệnh của bạn ở cuối trang. (Đây cũng là hướng dẫn của những người Yahoo .) Và nếu bạn định làm điều đó, thì không cần phải sử dụng ready, mặc dù tất nhiên bạn có thể nếu bạn thích.
Tuy nhiên, có một cái giá cho điều đó: Bạn cần đảm bảo rằng những thứ mà người dùng có thể nhìn thấy đã sẵn sàng để tương tác. Bằng cách chuyển thời gian tải xuống sau khi trang được hiển thị phần lớn, bạn sẽ tăng khả năng người dùng bắt đầu tương tác với trang trước khi tập lệnh của bạn được tải. Đó là một trong những phản đối để đặt scriptthẻ ở cuối. Thông thường, đó không phải là vấn đề, nhưng bạn phải xem trang của mình để xem liệu nó có đúng không và nếu có, bạn muốn giải quyết nó như thế nào. (Bạn có thể đặt một phần tử nội tuyến nhỏ scripttrong headthiết lập trình xử lý sự kiện trên toàn tài liệu để đối phó với điều này. Bằng cách đó, bạn sẽ có được thời gian tải được cải thiện nhưng nếu họ cố gắng làm điều gì đó quá sớm, bạn có thể nói với họ điều đó hoặc tốt hơn là xếp hàng thứ họ muốn làm và làm điều đó khi tập lệnh đầy đủ của bạn đã sẵn sàng.)
Trang của bạn sẽ tải chậm hơn do phân tán $(document).ready()các tập lệnh trong DOM (thay vì tất cả ở cuối) vì nó yêu cầu jQuery phải được tải đồng bộ trước.
$ = jQuery. Vì vậy, bạn không thể sử dụng $trong các tập lệnh của mình mà không tải jQuery trước. Cách tiếp cận này buộc bạn phải tải jQuery ở gần đầu trang, điều này sẽ tạm dừng tải trang của bạn cho đến khi tải xong jQuery.
Bạn cũng không thể asynctải jQuery vì trong nhiều trường hợp, $(document).ready()(các) tập lệnh của bạn sẽ cố gắng thực thi trước khi jQuery được tải hoàn toàn không đồng bộ và gây ra lỗi, vì một lần nữa, $chưa được xác định.
Điều đó đang được nói, có một cách để đánh lừa hệ thống. Về cơ bản thiết lập $bằng một hàm đẩy các $(document).ready()hàm vào hàng đợi / mảng. Sau đó, ở cuối trang, tải jQuery, sau đó lặp qua hàng đợi và thực thi từng $(document).ready()cái một. Điều này cho phép bạn hoãn jQuery xuống cuối trang nhưng vẫn sử dụng $phía trên nó trong DOM. Cá nhân tôi đã không kiểm tra xem điều này hoạt động tốt như thế nào, nhưng lý thuyết là âm thanh. Ý tưởng đã có từ lâu nhưng tôi rất hiếm khi thấy nó được thực hiện. Nhưng nó có vẻ là một ý tưởng tuyệt vời:
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax