jQuery: Mengapa menggunakan document.ready jika JS eksternal di bagian bawah halaman?

Saya menyertakan semua JS saya sebagai file eksternal yang dimuat di bagian paling bawah halaman. Di dalam file-file ini, saya memiliki beberapa metode yang didefinisikan seperti itu, yang saya panggil dari acara siap:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

Namun, ketika saya menghapus fungsi ready dan memanggil metode langsung, semuanya bekerja sama, tetapi mengeksekusi lebih cepat secara signifikan — hampir satu detik lebih cepat pada file yang cukup mendasar! Karena dokumen harus dimuat pada saat ini (karena semua markup berada sebelum tag skrip), apakah ada alasan bagus untuk tetap menggunakan acara siap?

Pertanyaan bagus.

Ada beberapa kebingungan seputar seluruh saran "letakkan skrip di bagian bawah halaman Anda" dan masalah apa yang coba dipecahkannya. Untuk pertanyaan ini saya tidak akan berbicara tentang apakah meletakkan skrip di bagian bawah halaman mempengaruhi kinerja / waktu muat atau tidak. Saya hanya akan berbicara tentang apakah Anda perlu $(document).ready jika Anda juga meletakkan skrip di bagian bawah halaman .

Saya berasumsi Anda mereferensikan DOM dalam fungsi-fungsi itu yang segera Anda gunakan dalam skrip Anda (apa pun yang sederhana seperti documentatau document.getElementById). Saya juga berasumsi bahwa Anda hanya menanyakan tentang file [referensi DOM] ini. IOW, skrip pustaka atau skrip yang diperlukan kode referensi DOM Anda (seperti jQuery) harus ditempatkan lebih awal di halaman.

Untuk menjawab pertanyaan Anda : jika Anda menyertakan skrip referensi DOM di bagian bawah halaman, Tidak, Anda tidak perlu $(document).ready.

Penjelasan : tanpa bantuan "onload"implementasi terkait seperti $(document).readyaturan praktisnya adalah: kode apa pun yang berinteraksi dengan elemen DOM dalam halaman harus ditempatkan / disertakan lebih jauh di bagian bawah halaman daripada elemen yang dirujuknya. Hal termudah untuk dilakukan adalah menempatkan kode itu sebelum penutupan </body>. Lihat disini dan disini . Ia juga bekerja di sekitar kesalahan "Operasi dibatalkan" yang ditakuti IE .

Karena itu, ini sama sekali tidak membatalkan penggunaan $(document).ready. Mereferensikan objek sebelum dimuat adalah [salah satu] kesalahan paling umum yang dilakukan saat memulai di JavaScript DOM (menyaksikannya terlalu banyak untuk dihitung). Ini adalah solusi jQuery untuk masalah tersebut, dan Anda tidak perlu memikirkan di mana skrip ini akan dimasukkan relatif terhadap elemen DOM yang dirujuknya. Ini adalah kemenangan besar bagi para pengembang. Hanya satu hal yang harus mereka pikirkan.

Selain itu, seringkali sulit atau tidak praktis untuk memindahkan semua skrip yang merujuk DOM ke bagian bawah laman (misalnya skrip apa pun yang mengeluarkan document.writepanggilan harus tetap diam). Di lain waktu, Anda menggunakan kerangka kerja yang merender beberapa template atau membuat potongan javascript dinamis, di dalamnya fungsi referensi yang perlu disertakan sebelum js.

Terakhir, biasanya menjadi "praktik terbaik" untuk memasukkan semua kode referensi DOM ke window.onloaddalamnya, namun telah terhalang oleh $(document).readyimplementasi karena alasan dokumen yang baik .

Semua ini menambahkan $(document).readysebagai solusi yang jauh lebih unggul, praktis dan umum untuk masalah merujuk elemen DOM terlalu dini.