jQuery: Di chuyển JavaScript xuống cuối trang?

Question

Chúng tôi đang phát triển các ứng dụng ASP.NET lớn với nhiều trang được tạo theo dynmically chứa các điều khiển ASCX. Chúng tôi sử dụng rất nhiều jQuery ở mọi nơi.

Tôi đã đọc rằng sẽ có ý nghĩa khi di chuyển mã JavaScript nội tuyến xuống cuối trang vì nó có thể trì hoãn việc tải trang khi được đưa vào "quá sớm".

Câu hỏi của tôi bây giờ là: Điều này vẫn hợp lý khi làm việc với jQuery?

Hầu hết mã được thực thi trong trình xử lý sẵn sàng, vì vậy tôi hy vọng điều đó sẽ không làm chậm quá trình tải trang. Trong trường hợp của tôi, nhiều Usercontrols ASCX có tất cả các bit và mảnh ghép jQuery riêng của họ và sẽ không dễ dàng để di chuyển tất cả xuống trong trang được hiển thị.

Answer 1

Bạn có thể lập mô hình các cách đặt hàng khác nhau của JavaScript theo số Cuzillion để xem nó ảnh hưởng như thế nào đến việc tải trang.

Xem examples và this blog post để biết ví dụ về cách sắp xếp thứ tự các yếu tố trang có thể ảnh hưởng đến tốc độ.

Answer 2

Hầu hết thời gian, lý do để di chuyển JavaScript của bạn xuống cuối trang là đảm bảo rằng mọi yếu tố DOM mà JavaScript có thể tham chiếu đã được tạo trước khi chạy JavaScript. Điều này cũng đảm bảo rằng trang có thời gian hiển thị trước khi chạy bất kỳ JavaScript nào.

Trong trường hợp này, tôi sẽ không lo lắng về việc di chuyển JavaScript xuống thấp hơn trên trang.

Answer 3

Việc đặt kịch bản trễ trong HTML được khuyến nghị vì việc tải và thực thi tập lệnh xảy ra tuần tự (một tập lệnh tại một thời điểm) và hoàn toàn chặn việc tải và phân tích cú pháp hình ảnh và tệp CSS trong khi đó.

Các tập lệnh lớn/chậm/chạy chậm gần đầu trang có thể gây chậm trễ không cần thiết cho việc tải và hiển thị nội dung/bố cục trang.

Kích thước của tập lệnh (thời gian tải xuống) và độ phức tạp (yếu tố thời gian thực hiện (v.v.)) - nhưng quan trọng hơn, số lượng yêu cầu HTTP <script> riêng lẻ quan trọng hơn nhiều (yêu cầu càng ít càng tốt).

Sử dụng trình xử lý "document.ready" sẽ giảm bớt sự chậm trễ gây ra bởi việc thực hiện chậm - nhưng vẫn để lại vấn đề về chi phí HTTP liên tiếp.

Đề nghị đọc: High Performance Web Sites bởi Nate Koeckley.

Answer 4

Khi bạn bao gồm JS thì việc tải trang từ điểm đó sẽ trì hoãn vì tệp JS có thể chứa câu lệnh "document.write".

Điều này có nghĩa là toàn bộ trang sẽ DỪNG được hiển thị từ điểm bạn bao gồm tệp JS và làm cho trình duyệt chuyển sang màu trắng hoặc thứ gì đó (ít nhất không hiển thị phần còn lại của trang) để câu trả lời ngắn là chắc chắn có ...!

(Còn câu trả lời là "có lẽ" với 99% xác suất)

Như trong di chuyển sự bao gồm của JS (và cũng JS trực tiếp - mà bạn không nên sử dụng BTW) đến phía dưới ...

Khi đó ta nói nếu bạn đang ở trên ASP.NET bạn không nên sử dụng jQuery mà là Ra-Ajax mà BTW có tất cả những "thực hành tốt nhất" Automagically bao gồm cho bạn ...