Câu trả lời:
Tất cả các tập lệnh nên được tải sau cùng
Trong mọi trường hợp, tốt nhất là đặt tất cả các tham chiếu tập lệnh của bạn ở cuối trang, ngay trước đó </body>.
Nếu bạn không thể làm như vậy do các vấn đề về khuôn mẫu và không có gì, hãy trang trí các thẻ script của bạn bằng deferthuộc tính để trình duyệt biết để tải xuống các tập lệnh của bạn sau khi HTML đã được tải xuống:
<script src="my.js" type="text/javascript" defer="defer"></script>Trường hợp cạnh
Có một số trường hợp cạnh, tuy nhiên, nơi bạn có thể gặp nhấp nháy trang hoặc hiện vật khác trong quá trình tải trang mà thường có thể được giải quyết bằng cách đơn giản là đặt tài liệu tham khảo kịch bản jQuery của bạn vào <head>thẻ mà không cần các deferthuộc tính. Các trường hợp này bao gồm Giao diện người dùng jQuery và các addon khác như jCarousel hoặc Treeview sửa đổi DOM như một phần chức năng của chúng.
Hãy cẩn thận hơn nữa
Có một số thư viện phải được tải trước DOM hoặc CSS, chẳng hạn như polyfill. Modernizr là một trong những thư viện như vậy phải được đặt trong thẻ head .
<head>. Nếu đánh dấu của bạn phụ thuộc vào plugin jQuery sắp xếp nội dung cho bạn, sẽ không có ý nghĩa gì khi đặt tham chiếu plugin ở cuối trang, vì bạn sẽ nhận được đánh dấu thú vị trong trang web của mình cho đến khi plugin tải. Các quy tắc có nghĩa là phải được tuân theo cho đến khi chúng không hoạt động nữa, tại thời điểm đó các quy tắc nên được phá vỡ.
Vấn đề gây ra bởi các tập lệnh là chúng chặn tải xuống song song. Đặc tả HTTP / 1.1 cho thấy các trình duyệt tải xuống không quá hai thành phần song song trên mỗi tên máy chủ. Nếu bạn phục vụ hình ảnh của mình từ nhiều tên máy chủ, bạn có thể nhận được nhiều hơn hai lần tải xuống song song. Tuy nhiên, trong khi tập lệnh đang tải xuống, trình duyệt sẽ không bắt đầu bất kỳ tải xuống nào khác, ngay cả trên các tên máy chủ khác nhau. Trong một số tình huống, không dễ để di chuyển các tập lệnh xuống dưới cùng. Ví dụ, nếu tập lệnh sử dụng document.write để chèn một phần nội dung của trang, nó không thể được chuyển xuống thấp hơn trong trang. Cũng có thể có vấn đề phạm vi. Trong nhiều trường hợp, có nhiều cách để khắc phục những tình huống này.
Một đề xuất thay thế thường được đưa ra là sử dụng các tập lệnh bị trì hoãn. Thuộc tính DEFER chỉ ra rằng tập lệnh không chứa document.write và là đầu mối cho các trình duyệt mà chúng có thể tiếp tục hiển thị. Thật không may, Firefox không hỗ trợ thuộc tính DEAX. Trong Internet Explorer, tập lệnh có thể được hoãn lại, nhưng không nhiều như mong muốn. Nếu một tập lệnh có thể được hoãn lại, nó cũng có thể được chuyển xuống cuối trang. Điều đó sẽ làm cho các trang web của bạn tải nhanh hơn.
EDIT: Firefox không hỗ trợ thuộc tính DEFER kể từ phiên bản 3.6.
Nguồn:
Tất nhiên chỉ tải jQuery vào đầu, thông qua CDN.
Tại sao? Trong một số trường hợp, bạn có thể bao gồm một phần mẫu (ví dụ đoạn trích mẫu đăng nhập ajax) với mã phụ thuộc jQuery được nhúng; nếu jQuery được tải ở cuối trang, bạn sẽ gặp lỗi "$ không được xác định", thật tuyệt.
Tất nhiên, có nhiều cách để khắc phục điều này (chẳng hạn như không nhúng bất kỳ mã JS nào và gắn vào gói js tải ở dưới cùng), nhưng tại sao bạn lại mất tự do của js được tải một cách lười biếng, vì có thể đặt mã phụ thuộc jQuery vào bất cứ nơi nào bạn muốn ? Công cụ Javascript không quan tâm nơi mã sống trong DOM miễn là các phụ thuộc (như jQuery được tải) được thỏa mãn.
Đối với các tệp js chung / chung của bạn, vâng, hãy đặt chúng trước </body>, nhưng đối với các trường hợp ngoại lệ, trong đó thực sự hợp lý để duy trì ứng dụng khôn ngoan để gắn đoạn mã phụ thuộc jQuery hoặc tham chiếu tệp ngay tại điểm đó trong html, hãy làm như vậy.
Không có hiệu suất hit jquery trong đầu; trình duyệt nào trên hành tinh này chưa có tệp CDN jQuery trong bộ đệm?
Phần lớn là không có gì, hãy gắn jQuery vào đầu và để cho tự do js của bạn ngự trị.
2%, một nửa sẽ rời đi trước khi tải trang lần đầu tiên. Bằng cách này, bạn đang mất 1%khách truy cập, nhưng có khả năng tiết kiệm cho mình rất nhiều thời gian phát triển và rắc rối. Xem điều này có hợp lý với mô hình kinh doanh của bạn không ...
Nimbuz cung cấp một lời giải thích rất tốt về vấn đề liên quan, nhưng tôi nghĩ câu trả lời cuối cùng phụ thuộc vào trang của bạn: điều gì quan trọng hơn để người dùng có sớm hơn - kịch bản hoặc hình ảnh?
Có một số trang không có ý nghĩa nếu không có hình ảnh, nhưng chỉ có kịch bản nhỏ, không cần thiết. Trong trường hợp đó, việc đặt các tập lệnh ở phía dưới sẽ hợp lý hơn, vì vậy người dùng có thể xem hình ảnh sớm hơn và bắt đầu hiểu ý nghĩa của trang. Các trang khác dựa trên kịch bản để làm việc. Trong trường hợp đó, tốt hơn là có một trang làm việc không có hình ảnh hơn một trang không hoạt động có hình ảnh, vì vậy sẽ rất hợp lý khi đặt các tập lệnh lên hàng đầu.
Một điều khác cần xem xét là các tập lệnh thường nhỏ hơn hình ảnh. Tất nhiên, đây là một khái quát và bạn phải xem liệu nó có áp dụng cho trang của bạn hay không. Nếu đúng như vậy, với tôi, đó là một lập luận cho việc đặt chúng lên hàng đầu như một quy tắc ngón tay cái (nghĩa là trừ khi có lý do chính đáng để làm khác), bởi vì chúng sẽ không trì hoãn hình ảnh nhiều như hình ảnh sẽ trì hoãn các tập lệnh. Cuối cùng, việc có tập lệnh ở trên cùng dễ dàng hơn nhiều, bởi vì bạn không phải lo lắng về việc liệu chúng đã được tải chưa khi bạn cần sử dụng chúng.
Tóm lại, tôi có xu hướng đặt các tập lệnh ở trên cùng theo mặc định và chỉ xem xét liệu có đáng để di chuyển chúng xuống dưới cùng sau khi trang hoàn thành hay không. Đó là một sự tối ưu hóa - và tôi không muốn thực hiện sớm.
Hầu hết các mã jquery thực thi trên tài liệu đã sẵn sàng, điều này không xảy ra cho đến cuối trang. Hơn nữa, kết xuất trang có thể bị trì hoãn bằng cách phân tích / thực thi javascript, vì vậy cách tốt nhất là đặt tất cả javascript ở cuối trang.
Thực hành tiêu chuẩn là đặt tất cả các tập lệnh của bạn ở cuối trang, nhưng tôi sử dụng ASP.NET MVC với một số bổ trợ jQuery và tôi thấy rằng tất cả đều hoạt động tốt hơn nếu tôi đặt các tập lệnh jQuery của mình vào <head>phần chính trang.
Trong trường hợp của tôi, có những tạo tác xảy ra khi trang được tải, nếu các tập lệnh nằm ở cuối trang. Tôi đang sử dụng plugin jQuery TreeView và nếu các tập lệnh không được tải ngay từ đầu, cây sẽ kết xuất mà không có các lớp CSS cần thiết được áp dụng bởi plugin. Vì vậy, bạn nhận được mớ hỗn độn trông buồn cười này khi trang tải lần đầu tiên, tiếp theo là kết xuất TreeView đúng cách. Nhìn rất xấu. Đặt các trình cắm jQuery trong <head>phần của trang chính sẽ loại bỏ vấn đề này.
@Html.Action, nó tự động ghi kết quả vào đầu ra, vì một phần của tôi $ is undefinedcó nghĩa là thay vào đó tôi phải sử dụng .load ('@ Url.Action') để tải một phần. Nhưng điều này mang lại một focc do yêu cầu thêm. Dựa trên đầu vào của bạn, tôi sẽ chỉ di chuyển jquery phía trên RenderBody () trong trang chính của mình
Mặc dù hầu hết tất cả các trang web vẫn đặt Jquery và các javascript khác trên tiêu đề: D, thậm chí kiểm tra stackoverflow.com.
Tôi cũng đề nghị bạn đeo vào trước thẻ kết thúc của cơ thể. Bạn có thể kiểm tra thời gian tải sau khi đặt vào một trong hai nơi. Thẻ script sẽ tạm dừng trang web của bạn để tải thêm.
và sau khi đặt javascript trên chân trang, bạn có thể nhận được giao diện khác thường của trang web cho đến khi nó tải javascript, vì vậy hãy đặt css trên phần tiêu đề của bạn.
Ngay trước đây </body>là nơi tốt nhất theo Thực tiễn tốt nhất của Yahoo Developer Network để tăng tốc trang web của bạn liên kết này , nó có ý nghĩa.
Điều tốt nhất để làm là tự kiểm tra.
Đối với tôi jQuery là một chút đặc biệt. Có thể là một ngoại lệ cho các tiêu chuẩn. Có rất nhiều tập lệnh khác dựa vào nó, vì vậy nó khá quan trọng là nó tải sớm để các tập lệnh khác đến sau sẽ hoạt động như dự định. Như một người khác đã chỉ ra, ngay cả trang này cũng tải jQuery trong phần đầu.