Di chuyển jQuery vào cuối thẻ body?

Bạn tôi đọc một bài báo đề cập đến việc di chuyển tất cả các tệp JavaScript vào cuối thẻ body đóng (</body>), sẽ cải thiện hiệu suất của một trang web.Di chuyển jQuery vào cuối thẻ body?

Tôi đã di chuyển tất cả các tệp JS sang bên ngoài ngoại trừ tệp JQuery và JS được gắn sự kiện vào một phần tử trên trang, như dưới đây;

$(document).ready(function(){ 
    //submit data 
    $("#create_video").click(function(){ //... }); 
});

nhưng anh ấy định di chuyển tệp thư viện jQuery vào cuối thẻ body. Tôi không nghĩ rằng nó là có thể, bởi vì tôi gắn nhiều sự kiện vào các phần tử trang trên tải bằng cách sử dụng bộ chọn jQuery, và để sử dụng bộ chọn jQuery, nó là phải để tải thư viện jQuery trước tiên.

Có thể di chuyển tệp thư viện JQuery đến cuối trang ngay trước khi đóng thẻ body (</body>) ??

Cảm ơn

Nguồn

2009-08-03 Prashant

Đây là một vấn đề tối ưu hóa tải trang. Xem câu trả lời của Duncan để biết thêm chi tiết về điều này. Miễn là bạn đang sử dụng onload để kích hoạt sự bắt đầu thực hiện kịch bản của bạn, bạn sẽ ổn thôi. Xem http://developer.yahoo.com/performance/rules.html để biết thêm. –

Chức năng $(document).ready nói không chạy cho đến khi DOM đã hoàn thành được khởi tạo - vì vậy di chuyển nó đến sau khi cơ thể không quan trọng miễn là thư viện JQuery được nạp đầu tiên. Độc đáo và một số giả định có thể không chính xác nữa nhưng được rồi.

Nguồn

2009-08-03 06:59:37 Chealion

hmmmm ... nghe hay đấy .. hãy để tôi thử ... – Prashant

Có, nó hoạt động ..... cảm ơn – Prashant

Thực hành tiêu chuẩn để di chuyển tất cả các js của bạn bao gồm đến cuối trang của bạn. Điều này là do khi một trình duyệt tải kịch bản, nó không sinh ra một luồng mới để làm như vậy, vì vậy về cơ bản trình duyệt sẽ đợi cho đến khi nó tải kịch bản trước khi nó tiến tới dòng tiếp theo.

Điều này có ý nghĩa gì đối với người dùng của bạn là họ sẽ thấy màn hình trống. Tốt hơn hết là nên để họ xem trang đầy đủ (ish) vì nó không giống như nó đã bị đình trệ.

Nguồn

2009-08-03 07:04:20 Duncan

Chỉ cần lưu ý rằng tệp JavaScript jQuery phải được tải trước khi bất kỳ lệnh gọi nào đến hàm $(...).

Nguồn

2009-08-03 07:06:17 CMS

Sử dụng javascript không phô trương (thêm trình xử lý sự kiện vào phần tử thay vì onclik = "..." v.v.). Đặt tất cả các tệp .js của bạn ở cuối thẻ body, với thư viện chính (jQuery trong trường hợp này) được đặt trước, và mọi thứ sẽ ổn. Bạn có thể sử dụng trình bao gồm giống như bundle fu

Bạn sẽ thấy hiệu suất tải trang lớn của mình.

Nguồn

2009-08-03 08:11:44 astropanic

Q - Tại sao tôi thường thấy JavaScript viết/bao gồm trước phần tử cơ đóng cửa trong một (x) tài liệu HTML?

A - Không thể truy cập các phần tử DOM bằng JavaScript cho đến khi trình duyệt có tải các phần tử HTML vào DOM. Bằng cách đặt JavaScript vào cuối tài liệu (x) HTML (trước khi đóng phần tử cơ thể), bạn sẽ đảm bảo rằng tập lệnh được gọi ngay sau DOM được xây dựng/tải và sẵn sàng để thao tác. Lợi thế của phương pháp này là mã JavaScript là được thực thi ngay sau khi DOM được được xây dựng và có thể trước khi sự kiện onload kích hoạt.

Người mới bắt đầu JavaScript bị cắt bởi điều này liên tục bằng cách đặt mã thao tác DOM trong phần tử tiêu đề của tài liệu HTML (x). Điều này gây ra lỗi vì DOM có chưa được xây dựng và do đó là chưa thể truy cập JavaScript mà truyền tải/điều khiển DOM.

Từ JavaScript Execution & Onload Techniques in Web Browsers

Nguồn

2009-08-03 08:19:58 tachfine

Lý do bài viết mà yêu cầu bạn di chuyển kịch bản để dưới cùng, là để cho phép các đồ tạo tác khác để có được tải về đầu tiên. (css & hình ảnh, sẽ tăng tốc thời gian hiển thị rõ ràng)

Điều này là do HTTP 1.1 đề xuất chỉ tải xuống 2 mục cho mỗi tên máy chủ. Và bạn chắc chắn sẽ muốn tệp css của bạn trở thành một trong những tệp đầu tiên được tải xuống, thay vì javascript có thể làm cho trang web xuất hiện chậm hơn (chỉ bằng thực tế là trình duyệt chưa có tệp css và không chắc chắn) bạn nên làm gì với html)

Nhưng nếu bạn đã sử dụng google to host your jQuery thì điều đó sẽ tải xuống song song và phủ nhận bất kỳ lý do nào để di chuyển xuống cuối trang của bạn.

Hoặc, bạn có thể thiết lập tên máy chủ thứ hai để lưu trữ nội dung tĩnh (chẳng hạn như css/scripts/images).

Nhưng google đã thực hiện công việc khó khăn cho bạn, do đó, bạn nên sử dụng nó nếu nó phù hợp. :-)

Nguồn

2009-08-03 08:35:36 davewasthere

Sử dụng "Hàng đợi sẵn sàng cho Dom" để thu thập các hàm được thực thi khi jQuery được tải và DOM đã sẵn sàng.

Ví dụ:

<html> 
    <head> 
    <script type="text/javascript"> 
     var domReadyQueue = []; 
    </script> 
    </head> 
    <body> 
    ... 
    <div class="foo"></div> 
    <script type="text/javascript"> 
    domReadyQueue.push(function($){ 
     $('.foo').doSomething(); 
    }) 
    </script> 
    ... 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
    jQuery(function(){ 
     while (domReadyQueue.length) { 
     domReadyQueue.shift()(jQuery); 
     } 
    }); 
    </script> 
    </body> 
</html>

Nguồn

2014-02-20 23:52:31 ColinM

Điều đó có vẻ đầy hứa hẹn –

Di chuyển jQuery vào cuối thẻ body?

Trả lời

Các vấn đề liên quan