Là $ (tài liệu). Có cần thiết nếu tôi đặt tất cả JavaScript của tôi ở cuối trang không?

Question

thể trùng lặp:
jquery - Is $(document).ready necessary?

Đưa JS ngay trên thẻ </body> cải thiện nhận thức thời gian tải vì trình duyệt không cần phải đọc và phân tích thông qua tất cả các JS trước khi nó có thể bắt đầu hiển thị trang.

Nhưng nó có lợi ích khác, phải không? Chúng ta không cần bọc JS trong $(document).ready(function() { ... }) vì tất cả các phần tử đã ở trên JS và do đó sẵn sàng cho thao tác.

1. Có phải $(document).ready cần thiết để đảm bảo DOM đã được tải đầy đủ và sẵn sàng để thao tác?

2. Có sự khác biệt nào giữa thời gian thực hiện không? Một phương pháp có thể cháy nhanh hơn phương pháp kia không?

3. Chúng tôi có thể liên kết các tệp JS bên ngoài của chúng tôi (<script src="..." />) ở cuối trang quá không, hoặc có cần phải nằm trong tiêu đề không?

Answer 1

Câu trả lời này SO nói NO:

stackoveflow question

$ (document) .ready là dành cho đảm bảo đầy đủ DOM có sẵn tại thời điểm hàm được gọi. Bất kỳ chức năng và sự kiện nào không phụ thuộc vào DOM không cần phải được đưa vào sự kiện sẵn sàng.

Ngoài ra - để cải thiện trang tốc độ dựng hình - tải file javascript động trong non-blocking thời trang: http://berklee.github.com/nbl/ hoặc https://github.com/rgrove/lazyload/

Kỹ thuật này làm việc hơi như thế này:

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

yếu tố mới này nạp nguồn tệp file1.js. Tệp bắt đầu tải xuống ngay sau khi phần tử được thêm vào trang. Điều quan trọng về kỹ thuật này là tệp được tải xuống và được thực thi mà không chặn các quy trình trang khác, bất kể nơi bắt đầu tải xuống. Bạn thậm chí có thể đặt mã này trong tiêu đề của tài liệu mà không ảnh hưởng đến phần còn lại của trang (ngoài kết nối HTTP được sử dụng để tải xuống tệp).

cuốn sách này: "JavaScript hiệu suất cao" của Nickolas Zakas có rất nhiều thông tin thú vị về tối ưu hóa hiệu suất JavaScript.