Jawaban:
Semua skrip harus dimuat terakhir
Dalam hampir setiap kasus, yang terbaik adalah menempatkan semua referensi skrip Anda di akhir halaman, tepat sebelum </body>.
Jika Anda tidak dapat melakukannya karena masalah templating dan yang lainnya, hiasi tag skrip Anda dengan deferatribut sehingga browser tahu untuk mengunduh skrip Anda setelah HTML diunduh:
<script src="my.js" type="text/javascript" defer="defer"></script>Kasus tepi
Ada beberapa kasus tepi, namun, di mana Anda mungkin mengalami halaman berkedip-kedip atau artefak lain selama buka halaman yang biasanya dapat diselesaikan dengan hanya menempatkan skrip referensi jQuery Anda di <head>tag tanpa itu deferatribut. Kasus-kasus ini termasuk jQuery UI dan tambahan lainnya seperti jCarousel atau Treeview yang memodifikasi DOM sebagai bagian dari fungsionalitasnya.
Peringatan lebih lanjut
Ada beberapa perpustakaan yang harus dimuat sebelum DOM atau CSS, seperti polyfill. Modernizr adalah salah satu perpustakaan yang harus ditempatkan di tag kepala .
<head>. Jika markup Anda bergantung pada plugin jQuery yang menyortir konten untuk Anda, tidak masuk akal menempatkan referensi plugin di bagian bawah halaman, karena Anda akan mendapatkan markup yang funky di halaman web Anda sampai plugins dimuat. Aturan dimaksudkan untuk diikuti sampai mereka tidak berfungsi lagi, di mana aturan harus dilanggar.
Masalah yang disebabkan oleh skrip adalah bahwa mereka memblokir unduhan paralel. Spesifikasi HTTP / 1.1 menyarankan agar peramban mengunduh tidak lebih dari dua komponen secara paralel per hostname. Jika Anda menayangkan gambar dari banyak nama host, Anda bisa mendapatkan lebih dari dua unduhan agar terjadi secara paralel. Ketika skrip sedang mengunduh, peramban tidak akan memulai unduhan lain, bahkan pada nama host yang berbeda. Dalam beberapa situasi tidak mudah untuk memindahkan skrip ke bawah. Misalnya, jika skrip menggunakan document.write untuk menyisipkan bagian dari konten halaman, skrip tidak dapat dipindahkan lebih rendah di halaman. Mungkin juga ada masalah pelingkupan. Dalam banyak kasus, ada cara untuk mengatasi situasi ini.
Saran alternatif yang sering muncul adalah menggunakan skrip yang ditangguhkan. Atribut DEFER menunjukkan bahwa skrip tidak mengandung document.write, dan merupakan petunjuk bagi peramban yang dapat terus dirender. Sayangnya, Firefox tidak mendukung atribut DEFER. Di Internet Explorer, skrip mungkin ditangguhkan, tetapi tidak sebanyak yang diinginkan. Jika skrip dapat ditangguhkan, skrip juga dapat dipindahkan ke bagian bawah halaman. Itu akan membuat halaman web Anda memuat lebih cepat.
EDIT: Firefox mendukung atribut DEFER sejak versi 3.6.
Sumber:
Hanya memuat jQuery sendiri di kepala, tentu saja melalui CDN.
Mengapa? Dalam beberapa skenario, Anda mungkin menyertakan templat parsial (mis. Cuplikan formulir login ajax) dengan kode dependen jQuery; Jika jQuery dimuat di bawah halaman, Anda mendapatkan kesalahan "$ tidak didefinisikan", bagus.
Ada beberapa cara untuk mengatasinya tentu saja (seperti tidak menyematkan JS apa pun dan menambahkan ke js bundel load-at-bottom), tetapi mengapa kehilangan kebebasan js bermuatan malas, karena dapat menempatkan kode jQuery tergantung di mana saja Anda mau ? Mesin Javascript tidak peduli di mana kode tinggal di DOM selama dependensi (seperti jQuery sedang dimuat) puas.
Untuk file umum / bersama js Anda, ya, tempatkan sebelumnya </body>, tetapi untuk pengecualian, di mana itu benar-benar hanya masuk akal pemeliharaan aplikasi bijaksana untuk menempelkan potongan jQuery tergantung atau referensi file di sana pada saat itu di html, lakukanlah.
Tidak ada kinerja pemuatan hit jquery di kepala; browser apa di planet ini yang belum memiliki file CDN jQuery dalam cache?
Banyak basa-basi tentang apa pun, tetap jQuery di kepala dan biarkan kebebasan js Anda berkuasa.
2%, katakanlah, setengah akan pergi sebelum halaman dimuat untuk pertama kalinya. Dengan cara ini Anda kehilangan 1%pengunjung, tetapi berpotensi menghemat banyak waktu dan masalah pengembangan diri. Lihat apakah ini masuk akal dengan model bisnis Anda ...
Nimbuz memberikan penjelasan yang sangat baik tentang masalah yang terlibat, tetapi saya pikir jawaban akhir tergantung pada halaman Anda: apa yang lebih penting bagi pengguna untuk memiliki lebih cepat - skrip atau gambar?
Ada beberapa halaman yang tidak masuk akal tanpa gambar, tetapi hanya memiliki skrip kecil, tidak penting. Dalam hal ini masuk akal untuk meletakkan skrip di bagian bawah, sehingga pengguna dapat melihat gambar lebih cepat dan mulai memahami halaman. Halaman lain bergantung pada skrip untuk berfungsi. Dalam hal ini lebih baik memiliki halaman yang berfungsi tanpa gambar daripada halaman yang tidak berfungsi dengan gambar, jadi masuk akal untuk menempatkan skrip di bagian atas.
Hal lain yang perlu dipertimbangkan adalah bahwa skrip biasanya lebih kecil dari gambar. Tentu saja, ini adalah generalisasi dan Anda harus melihat apakah itu berlaku untuk halaman Anda. Jika ya, bagi saya, itu adalah argumen untuk menempatkan mereka sebagai yang pertama (kecuali ada alasan yang baik untuk melakukan sebaliknya), karena mereka tidak akan menunda gambar sebanyak gambar akan menunda skrip. Akhirnya, jauh lebih mudah untuk memiliki skrip di bagian atas, karena Anda tidak perlu khawatir tentang apakah mereka dimuat saat Anda perlu menggunakannya.
Singkatnya, saya cenderung untuk menempatkan skrip di bagian atas secara default dan hanya mempertimbangkan apakah layak memindahkannya ke bawah setelah halaman selesai. Ini optimasi - dan saya tidak ingin melakukannya sebelum waktunya.
Sebagian besar kode jquery dieksekusi pada dokumen siap, yang tidak terjadi sampai akhir halaman. Lebih jauh, rendering halaman dapat ditunda dengan penguraian / eksekusi javascript, jadi ini praktik terbaik untuk meletakkan semua javascript di bagian bawah halaman.
Praktik standar adalah untuk meletakkan semua skrip Anda di bagian bawah halaman, tapi saya menggunakan ASP.NET MVC dengan sejumlah plugin jQuery, dan saya menemukan bahwa semuanya bekerja lebih baik jika saya meletakkan skrip jQuery saya di <head>bagian master halaman.
Dalam kasus saya, ada artefak yang terjadi ketika halaman dimuat, jika skrip berada di bagian bawah halaman. Saya menggunakan plugin jQuery TreeView, dan jika skrip tidak dimuat di awal, pohon akan membuat tanpa kelas CSS yang diperlukan yang dikenakan oleh plugin. Jadi Anda mendapatkan kekacauan yang tampak lucu ini saat halaman pertama dimuat, diikuti oleh rendering TreeView yang tepat. Terlihat sangat buruk. Menempatkan plugin jQuery di <head>bagian halaman master menghilangkan masalah ini.
@Html.Action, yang secara dinamis menulis hasil ke output, karena parsial saya memberi $ is undefinedmakna saya malah harus menggunakan .load ('@ Url.Action') untuk memuat parsial. Tapi ini memberikan fouc karena permintaan tambahan. Berdasarkan masukan Anda, saya hanya akan memindahkan jquery di atas RenderBody () di halaman master saya
Meskipun hampir semua situs web masih menempatkan Jquery dan javascript lainnya di header: D, bahkan periksa stackoverflow.com.
Saya juga menyarankan Anda untuk memakai sebelum tag akhir tubuh. Anda dapat memeriksa waktu pemuatan setelah menempatkan di kedua tempat. Tag skrip akan menjeda laman web Anda untuk memuat lebih lanjut.
dan setelah menempatkan javascript di footer, Anda mungkin mendapatkan tampilan halaman web yang tidak biasa hingga memuat javascript, jadi letakkan css di bagian header Anda.
Tepat sebelum </body>adalah tempat terbaik menurut Yahoo Developer Jaringan 's Best Practices untuk Mempercepat Up Situs Web Anda link ini , masuk akal.
Hal terbaik untuk dilakukan adalah menguji sendiri.
Bagi saya, jQuery sedikit istimewa. Mungkin pengecualian terhadap norma. Ada begitu banyak skrip lain yang mengandalkannya, sehingga cukup penting untuk memuatnya lebih awal sehingga skrip lain yang datang nanti akan berfungsi sebagaimana dimaksud. Seperti orang lain tunjukkan bahkan halaman ini memuat jQuery di bagian kepala.