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:
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 .
Nah, pertimbangkan ini: themeforest.net/item/portfolious-professional-business-template/… . Ini adalah tema situs yang baru-baru ini saya beli yang mana fitur di beranda penggunaan jQuery dengan jCarousel. Ketika saya memindahkan blok skrip dari kepala ke ujung file saya perhatikan gambar yang digunakan dalam korsel semua akan ditampilkan sekaligus saat memuat halaman, sedangkan ketika file skrip berada di kepala, halaman akan memuat lebih lancar.
Chad Levy
5
Gunakan CSS untuk mengatur keadaan awal konten. CSS harus masuk di kepala. Melanggar sesuatu untuk membuat sesuatu yang lain berhasil bukanlah solusi. Jika pengunjung harus menunggu jQuery dan semua plugin terkait untuk memuat sebelum konten apa pun dibuat, ia mungkin tidak tinggal cukup lama untuk melihat konten.
Duncan
9
ChadLevy benar: ada beberapa kondisi di mana plugin jQuery berfungsi lebih baik jika direferensikan di <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.
Robert Harvey
2
@Uncunc: Idealnya ini akan menjadi kasus di mana Anda dapat mengontrol semua dependensi. Hal tentang jQuery (lebih khusus hal-hal seperti jQuery UI dan addons lainnya) adalah dengan desain Anda tidak dapat memiliki kontrol penuh atas fungsionalitasnya, jadi menambahkan sesuatu seperti atribut visibilitas ke elemen DOM sehingga itu memuat lebih anggun mungkin tidak mungkin jika addon yang menggunakan elemen itu tidak akan mempertimbangkan atribut kata akun. Kadang-kadang lebih baik menentang konvensi sederhana daripada mencoba untuk mendapatkan ketergantungan untuk bekerja seperti yang Anda inginkan.
Chad Levy
2
@Stefan: Jika plugin jQuery Anda tidak diizinkan untuk memanipulasi DOM, lalu apa gunanya?
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.
Saya telah melihat beberapa saran modern yang menyatakan naskah harus ditempatkan di atas. Menempatkan skrip di bagian bawah memungkinkan gambar dan konten lain di badan laman dimuat secara paralel, tetapi secara efektif menyebabkan skrip di laman dimuat nanti - seluruh badan HTML perlu diunduh sebelum browser tahu tentang URL skrip untuk dimuat. Kebanyakan orang merujuk pada panduan Yahoo, yang tidak lagi akurat - Firefox memang menghormati atribut yang ditangguhkan pada skrip. Penangguhan di bagian atas akan menghasilkan pemuatan halaman yang lebih cepat jika Anda mengukurnya.
ShadowChaser
Dapatkah saya melihat beberapa statistik pada kecepatan memuat halaman dengan metode ini?
Pembaruan: pada awal / pertengahan 2016, semua browser modern telah meningkatkan jumlah koneksi per hostname menjadi setidaknya 6.
Night Owl
32
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.
banyak, banyak browser tidak; sekitar 2% adalah angka tertinggi yang pernah saya baca, ketika Anda mengambil versi ke akun dan fakta caching didasarkan pada nama sumber daya yang tepat, jadi jquery1.4.2 tidak sama dengan jquery1.7, atau 1.9.1 atau .. .
Toni Leigh
Dari mereka 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 ...
osa
13
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.
Anda memiliki saya sampai Anda menyeret keluar argumen optimasi prematur. Itu hanyalah aturan lain yang diikuti orang secara dogmatis tanpa sepenuhnya memahami implikasinya.
Robert Harvey
6
Oh well, tidak bisa memenangkan semuanya! Saya meyakini bahwa saya memahami implikasinya. :)
EMP
Saya tidak yakin Anda perlu khawatir jika skrip Anda telah dimuat. Rendering blok hingga skrip dimuat, yang menjadi pokok diskusi ini. Jadi selama Anda tidak menelepon apa pun sebelum Anda memuatnya, Anda baik-baik saja. Dan di samping itu, itulah gunanya callback dan Anda seharusnya tidak benar-benar menanamkan banyak hal lain di halaman Anda. Seperti yang saya pahami, gambar tidak memblokir (mereka memuat secara paralel) dan pada kenyataannya DOM dapat siap dan skrip Anda berjalan sebelum gambar dimuat sepenuhnya. Tidak masuk akal untuk menempatkan skrip terlebih dahulu hanya untuk menghindari mereka diblokir.
Duncan
4
Mengingat bahwa konsensus umum adalah meletakkan skrip di bagian bawah, bukankah akan lebih baik untuk melakukannya secara default, dan hanya memindahkannya ke atas jika Anda mengalami masalah? Tampaknya aneh melakukan hal-hal yang mundur. Terkadang lebih baik melakukan hal yang optimal jika tidak ada perbedaan dalam upaya yang dikeluarkan :)
Duncan
@Duncan, Ya itu pendekatan saya. Saya meletakkan plugin di bagian bawah, dan ketika saya memiliki masalah, saya meletakkannya di bagian atas, dan itu memperbaiki masalah.
Robert Harvey
6
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.
Intranet tidak tunduk pada kondisi yang sama seperti internet, sehingga penundaan muat mungkin kurang terlihat. Tetap disarankan untuk mengikuti aturan.
Duncan
tidak, menempatkan pengidentifikasi / gaya CSS di markup (alih-alih menunggu jQuery untuk melakukannya di DOM ready) menyelesaikan masalah.
Dan Beam
1
@Dan Beam: Treeview diisi dari tabel basis data, dan gaya Treeview diatur oleh plugin Treeview berdasarkan konten tabel, jadi tidak, itu tidak akan berfungsi.
Robert Harvey
1
Mengapa saya melakukan itu ketika saya bisa meletakkan script Treeview Plugin yang tidak dimodifikasi di bagian atas halaman, dan itu akan berfungsi dengan baik? Itu tidak masuk akal, Dan.
Robert Harvey
1
Cheers Robert, saya juga menggunakan ASP.NETMVC dengan bentuk parsial. Masuk akal untuk menjaga javascript dalam parsial karena bidang baru ditugaskan ulang fungsinya setiap kali parsial dieksekusi (katakan untuk validasi). Saya hanya menghadapi masalah dengan ini ketika mencoba untuk menggunakan @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
Malkin
4
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.
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: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 itudeferatribut. 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 .
sumber
<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.Letakkan Script di Bawah
EDIT: Firefox mendukung atribut DEFER sejak versi 3.6.
Sumber:
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.
sumber
2%, katakanlah, setengah akan pergi sebelum halaman dimuat untuk pertama kalinya. Dengan cara ini Anda kehilangan1%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.
sumber
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.
sumber
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.sumber
@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 sayaMeskipun 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.
sumber
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.
sumber
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.
sumber