jQuery: Tại sao lại sử dụng document.ready nếu JS bên ngoài ở cuối trang?

Question

Tôi bao gồm tất cả JS của mình dưới dạng tệp bên ngoài được tải ở cuối trang. Trong những tập tin này, tôi có một số phương pháp định nghĩa như vậy, mà tôi gọi là từ sự kiện đã sẵn sàng:

var SomeNamepsace = {}; 

SomeNamepsace.firstMethod = function() { 
    // do something 
}; 

SomeNamepsace.secondMethod = function() { 
    // do something else 
}; 

$(document).ready(function() { 
    SomeNamepsace.firstMethod(); 
    SomeNamepsace.secondMethod(); 
}); 

Tuy nhiên, khi tôi loại bỏ các chức năng sẵn sàng và gọi các phương pháp thẳng lên, tất cả mọi thứ chỉ hoạt động như nhau, nhưng thực hiện nhanh hơn đáng kể — gần như toàn bộ giây nhanh hơn trên một tệp khá cơ bản! Vì tài liệu nên được tải vào thời điểm này (vì tất cả đánh dấu đều xuất hiện trước thẻ script), có lý do nào để vẫn sử dụng sự kiện sẵn sàng không?

Answer 1

Câu hỏi hay.

Có một số sự nhầm lẫn xung quanh toàn bộ lời khuyên "đặt kịch bản ở cuối trang của bạn" và những vấn đề cần giải quyết. Đối với câu hỏi này, tôi sẽ không nói về việc đặt kịch bản ở cuối trang có ảnh hưởng đến hiệu suất/thời gian tải hay không. Tôi sẽ chỉ nói về việc bạn cần $(document).readynếu bạn cũng đặt tập lệnh ở cuối trang.

Tôi giả sử bạn đang tham chiếu DOM trong các hàm đó mà bạn đang gọi ngay lập tức trong tập lệnh của mình (mọi thứ đơn giản như document hoặc document.getElementById). Tôi cũng giả định rằng bạn chỉ hỏi về các tệp [tham chiếu DOM] này. IOW, tập lệnh thư viện hoặc tập lệnh mà mã tham chiếu DOM của bạn yêu cầu (như jQuery) cần được đặt trước đó trong trang.

Để trả lời câu hỏi của bạn: nếu bạn bao gồm tập lệnh tham chiếu DOM ở cuối trang, Không, bạn không cần $(document).ready.

Giải thích: mà không sự trợ giúp của "onload" triển khai -related như $(document).ready quy tắc của ngón tay cái là: bất kỳ mã tương tác với các yếu tố DOM trong trang nên được đặt/đưa thêm xuống trang hơn các yếu tố đó tài liệu tham khảo. Điều dễ nhất cần làm là đặt mã đó trước khi đóng </body>. Xem here và here. Nó cũng hoạt động xung quanh sự sợ hãi của IE "Operation aborted" error.

Có nói rằng, điều này không có nghĩa là vô hiệu hóa việc sử dụng $(document).ready. Việc tham chiếu một đối tượng trước khi nó được nạp là một trong những lỗi phổ biến nhất được thực hiện khi bắt đầu trong DOM JavaScript (đã chứng kiến ​​nó quá nhiều lần để đếm). Đó là giải pháp của jQuery cho vấn đề, và nó không yêu cầu bạn phải suy nghĩ về nơi tập lệnh này sẽ được bao gồm liên quan đến các phần tử DOM mà nó tham chiếu. Đây là một chiến thắng lớn cho các nhà phát triển. Nó chỉ là một điều ít hơn họ phải suy nghĩ về.

Ngoài ra, việc di chuyển tất cả các tập lệnh tham khảo DOM đến cuối trang là rất khó hoặc không thực tế (ví dụ: bất kỳ tập lệnh nào phát hành document.write cuộc gọi phải được đặt). Lần khác, bạn đang sử dụng một khung làm cho một số mẫu hoặc tạo các đoạn mã động, trong đó tham chiếu các hàm cần được bao gồm trước các js.

Cuối cùng, nó thường là "thực hành tốt nhất" để mứt tất cả mã tham chiếu DOM thành window.onload, tuy nhiên nó đã bị lu mờ bởi $(document).ready triển khai cho well document reasons.

Tất cả điều này thêm tối đa $(document).ready là giải pháp vượt trội, thiết thực và chung chung cho vấn đề tham chiếu đến các phần tử DOM quá sớm.