Apa Pro dan Kontra: meletakkan javascript di kepala dan meletakkan tepat sebelum tubuh menutup

Question 1

Kebanyakan javascript dan buku / artikel pengembangan web mengatakan bahwa Anda harus meletakkan CSS di tag head dan javascript di bagian bawah halaman.

Tetapi ketika saya membuka sumber html dari situs-situs terkenal seperti stackoverflow yang satu ini, saya menemukan mereka meletakkan beberapa file js di tag head.

Apa Pro dan Kontra dari kedua pendekatan dan kapan menggunakan yang mana?

Menemukan pertanyaan lain untuk masalah yang sama: Di mana saya harus menyatakan file JavaScript digunakan di halaman saya? Di <head> </head> atau di dekat </body>?

Question 2

Dari Praktik Terbaik Yahoo untuk Mempercepat Situs Web Anda :

Masalah yang disebabkan oleh skrip adalah skrip memblokir unduhan paralel. Spesifikasi HTTP / 1.1 menunjukkan bahwa browser mengunduh tidak lebih dari dua komponen secara paralel per nama host. Jika Anda menyajikan gambar Anda dari beberapa nama host, Anda bisa mendapatkan lebih dari dua unduhan yang terjadi secara paralel. Namun, saat skrip sedang diunduh, browser tidak akan memulai unduhan lain, bahkan pada nama host yang berbeda.

Dalam beberapa situasi, tidak mudah untuk memindahkan skrip ke bawah. Jika, misalnya, skrip menggunakan document.write untuk menyisipkan bagian dari konten halaman, itu tidak dapat dipindahkan ke bawah 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 berisi document.write, dan merupakan petunjuk bagi browser bahwa mereka dapat melanjutkan rendering. 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.

Karena itu, secara umum, lebih disukai meletakkannya di bagian bawah. Namun, tidak selalu mungkin, dan sering tidak membuat bahwa banyak perbedaan pula.

Question 3

Seperti yang dikatakan orang lain, saat Anda meletakkan javascript di head, rendering halaman akan tertunda hingga skrip dimuat, yang berarti halaman mungkin membutuhkan waktu lebih lama untuk dimuat - terutama jika Anda mendownload file skrip yang besar.

Jika Anda memindahkan tag skrip ke akhir halaman, Anda akan memastikan bahwa browser mendownload gambar dan stylesheet sebelum tag skrip dan halaman tersebut kemungkinan akan tampil untuk dirender sebelum skrip mulai dijalankan. Ini juga berarti bahwa jika Anda bergantung pada beberapa fungsionalitas dari skrip Anda, ini tidak akan tersedia sampai beberapa saat setelah halaman terlihat oleh pengguna.

Jika Anda menambahkan gaya atau elemen (dll. Mengganti bidang teks dengan beberapa bentuk editor yang lebih kaya) ini akan terlihat oleh pengguna sebagai berkedip.

Jika Anda menambahkan peristiwa klik ke elemen, mereka tidak akan dapat diklik sampai beberapa saat setelah elemen itu sendiri terlihat.

Terkadang masalah ini mengharuskan Anda untuk meletakkan skrip Anda di kepala, di lain waktu Anda akan baik-baik saja dengan menempelkannya di bagian bawah.

IMHO (sepenuhnya bertentangan dengan YSlow dan banyak orang pintar) Anda harus menyimpan skrip Anda di tag kepala, dan hanya mengandalkan mereka untuk di-cache sebagian besar waktu.

Question 4

Secara umum, Anda harus menempatkan referensi skrip di bagian bawah halaman Anda. Skrip tidak hanya perlu diunduh, tetapi juga harus dievaluasi dan dijalankan sebelum blok dilepaskan dan halaman melanjutkan proses rendering. Hal-hal seperti Modernizr harus ditempatkan di atas karena ia melakukan beberapa deteksi fitur serta shims HTML5 yang mungkin Anda inginkan.

Alasan lain Anda ingin mencoba menempatkan skrip di bagian bawah halaman adalah Titik Kegagalan Tunggal atau SPOF. Di sinilah waktu panggilan skrip atau karena alasan lain memblokir eksekusi halaman. Ini bisa sering terjadi dengan perpustakaan iklan pihak ketiga, dll.

Ya, Anda mungkin harus berpikir sedikit lebih keras tentang bagaimana Anda merancang aplikasi Anda, tetapi saya merasa itu menjadi sangat alami dengan sangat cepat bagi saya. Saya telah membangun ratusan aplikasi web selama 4 tahun terakhir dengan skrip di bagian bawah dan saya dapat membedakannya. Saya mungkin 500ms mungkin 5000ms tapi itu semua penting.

Question 5

Itu sangat tergantung pada situs web Anda. Jika Anda mengakses dan menjalankan fungsi JavaScript di dalam body maka itu harus direferensikan di header agar dapat dimuat. Lain jika Anda hanya akan memanggil JavaScript saat seluruh dokumen dimuat, maka bijaksana untuk meletakkan JavaScript di akhir badan. Dengan meletakkan file .JS di bagian akhir, Anda memuat seluruh halaman dan kemudian mengambil file .JS. Dengan cara ini pengguna akan dapat melihat halaman dengan cepat dan pada saat dia terbiasa dengan halaman tersebut, file .JS telah diunduh.

Question 6

Javascript apa pun di kepala akan dievaluasi sebelum halaman dimuat, yang berarti halaman tersebut terasa membutuhkan waktu lebih lama untuk dimuat. Agak lebih sulit untuk membuat acara berfungsi dengan baik jika semua javascript berada di akhir, tetapi jQuery cukup banyak menyelesaikan masalah ini untuk Anda.