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

26

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?

javascript performance jquery

— DisgruntledGoat
sumber

Saya mengalami masalah sebaliknya. Saya memiliki skrip yang membuat dan memposisikan bilah sisi, tetapi sayangnya halaman tersebut dibuat sebelum skrip saya dijalankan, menghasilkan sentakan yang tidak sedap dipandang saat elemen halaman digambar ulang di lokasi baru. Apakah mungkin untuk memblokir render hingga skrip saya selesai, atau menjalankan ukuran dan posisi saya sebelum render pertama?

3

Bukankah pertanyaan ini milik StackOverflow?

— Marco Demaio

30

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.

— Callan
sumber

6

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.

— Macha
sumber

3

Skrip tidak memiliki penggunaan aktual hingga HTML selesai dimuat - skrip tidak dapat mengubah DOM sampai HTML dimuat. document.readymenunggu DOM dimuat. Jadi, tidak ada gunanya memegang hal-hal penting seperti stylesheet.

Letakkan skrip di bagian bawah halaman (sebelum </body>tag) 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.

Sementara browser secara progresif merender halaman, jika hits tag skrip (yaitu file Javascript eksternal) semuanya berhenti . Skrip memiliki hak jalan - saat skrip sedang mengunduh, peramban tidak akan memulai unduhan lainnya. yaitu 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 render progresif sampai semua stylesheet diunduh dan memindahkannya ke dokumen HEADmenghilangkan masalah.

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

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

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

— Tom
sumber

1

Tidak sepenuhnya benar. Script dapat mengubah DOM sebelum semua HTML dimuat ... Sebenarnya itulah sebabnya skrip memblokir karena mereka dapat mengubah halaman. Yang mengatakan, dalam banyak kasus pengembang tidak perlu menambahkan skrip 'perilaku' mereka sampai DOM dimuat.

— scunliffe

1

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

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

— Kornel
sumber