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>?
javascript
Amr Elgarhy
sumber
sumber
Jawaban:
Dari Praktik Terbaik Yahoo untuk Mempercepat Situs Web Anda :
Karena itu, secara umum, lebih disukai meletakkannya di bagian bawah. Namun, tidak selalu mungkin, dan sering tidak membuat bahwa banyak perbedaan pula.
sumber
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.
sumber
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.
sumber
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.
sumber
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.
sumber