it-swarm-id.com

Apakah "menempatkan Javascript di bawah" mengalahkan tujuan dokumen. Sudah?

Saya tahu bahwa disarankan untuk meletakkan Javascript di bagian bawah halaman, tetapi jika saya menggunakan jQuery tidakkah ini mengalahkan tujuannya untuk dijalankan ketika DOM memuat?

Jika saya memiliki menu dropdown, misalnya, dropdown tidak akan muncul sampai semua halaman dimuat. Saya juga mencoba mengembangkan dengan peningkatan progresif dalam pikiran, jadi saya mungkin memiliki elemen yang disembunyikan dengan jQuery alih-alih CSS (sehingga pengguna non-JS dapat melihatnya).

Apakah ada media yang bahagia, mungkin?

26
DisgruntledGoat

Document.ready menunggu DOM untuk memuat sebelum menjalankan JavaScript apa pun (http://www.learningjquery.com/2006/09/introducing-document-ready).

Gagasan untuk meletakkannya di bagian bawah, berarti bahwa jika JS Anda mengalami masalah atau orang tersebut memiliki koneksi yang lambat, sisa halaman masih dimuat terlebih dahulu, dan tidak "hang".

JS masih berjalan ketika semuanya telah dimuat, apakah itu pada awal atau akhir.

30
Callan

Menempatkan javascript di bagian bawah berarti bahwa konten halaman lainnya (terutama teks) dimuat sebelum javascript sehingga pengguna tidak menunggu JS untuk memuat jika mereka memiliki koneksi yang lambat.

Ini tidak memengaruhi dokumen. Sudah, seperti yang dipanggil saat browser selesai menyiapkan DOM untuk satu halaman. Apa pun yang terjadi, semuanya masih perlu dimuat terlebih dahulu.

6
Macha

Sebuah skrip tidak memiliki penggunaan aktual hingga HTML selesai memuat - sebuah skrip tidak dapat mengubah DOM sampai HTML dimuat. document.ready menunggu DOM untuk memuat. Jadi, tidak ada gunanya memegang hal-hal penting seperti stylesheet.

Letakkan skrip di bagian bawah halaman (sebelum tag </body>) untuk memesan untuk mendapatkan HTML dan CSS Anda kepada pengguna secepat mungkin. Peramban akan dapat merender halaman lebih cepat dan kemudian skrip dapat dimuat, daripada meninggalkan halaman kosong bagi pengguna untuk menatap sementara mereka menunggu skrip untuk diunduh.

Saat browser secara progresif merender halaman, jika hits tag skrip (mis. File Javascript eksternal) semuanya berhenti. Skrip memiliki hak jalan - saat skrip sedang mengunduh, peramban tidak akan memulai unduhan lainnya. mis. Gambar dan stylesheet dan unduhan paralel lainnya akan diblokir, bahkan pada nama host yang berbeda.

Kerugian menempatkan skrip di bagian bawah halaman adalah karena halaman akan di-render sebelum skrip diinisialisasi, terutama clicker cepat akan dapat berinteraksi dengan situs Anda sebelum Javascript siap.

Catatan: Kebalikannya berlaku untuk Stylesheets - Stylesheets di dekat bagian bawah blok blok render progresif hingga semua stylesheet diunduh dan memindahkannya ke dokumen HEAD menghilangkan masalah.


Ada trik yang rapi untuk memuat javascript tanpa membuat pengguna menunggu, Anda dapat membuat elemen <script/> menggunakan metode DOM createElement() dan menambahkannya ke halaman sesaat sebelum penutupan </body> menandai:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Browser tidak mulai mengunduh skrip js hingga elemen <script/> yang baru benar-benar ditambahkan ke halaman. Setelah unduhan selesai, browser mengartikan kode Javascript yang terkandung di dalamnya.

3
Tom

Iya nih. Jika Anda meletakkan skrip di bagian bawah, doc.ready (acara DOMContentLoaded) tidak diperlukan lagi - skrip Anda akan dieksekusi setelah semua DOM sebelumnya dimuat pula.

Karena skrip pada akhirnya meningkatkan kinerja (parsing HTML dan pemuatan CSS dan gambar tidak diblokir oleh skrip) Saya sarankan menempatkan skrip di bagian bawah daripada menggunakan doc.ready.

1
Kornel