$ (dokumen) .ready (function () {}); vs script di bagian bawah halaman

Jawaban:

142

Sangat sedikit dalam dan dari dirinya sendiri, DOM akan siap untuk Anda operasikan (saya gugup tentang itu sampai saya membaca ini dari Google ). Jika Anda menggunakan trik akhir halaman, kode Anda mungkin dipanggil sedikit, sedikit lebih cepat, tetapi tidak ada yang penting. Namun yang lebih penting, pilihan ini berkaitan dengan tempat Anda menautkan JavaScript ke halaman.

Jika Anda menyertakan scripttag Anda di headdan mengandalkan ready, browser menemukan scripttag Anda sebelum menampilkan apa pun kepada pengguna. Dalam kejadian normal, browser berhenti menderu dan pergi dan mengunduh skrip Anda, menjalankan penerjemah JavaScript, dan menyerahkan skrip ke sana, lalu menunggu sementara penerjemah memproses skrip (dan kemudian jQuery mengawasi dengan berbagai cara agar DOM siap). (Saya mengatakan "dalam hal biasa" karena beberapa browser mendukung atribut asyncataudefer pada scripttag.)

Jika Anda menyertakan scripttag Anda di akhir bodyelemen, browser tidak melakukan semua itu sampai sebagian besar halaman Anda sudah ditampilkan kepada pengguna. Ini meningkatkan persepsi waktu buka halaman Anda.

Jadi untuk mendapatkan waktu muat yang dipersepsikan terbaik, letakkan skrip Anda di bagian bawah halaman. (Ini juga pedoman dari orang-orang Yahoo .) Dan jika Anda akan melakukannya, maka tidak perlu menggunakan ready, meskipun tentu saja Anda bisa jika Anda suka.

Ada harga untuk itu, meskipun: Anda harus yakin bahwa hal-hal yang dapat dilihat pengguna siap untuk diinteraksikan. Dengan memindahkan waktu pengunduhan ke setelah sebagian besar halaman ditampilkan, Anda meningkatkan kemungkinan pengguna mulai berinteraksi dengan halaman sebelum skrip Anda dimuat. Itulah salah satu argumen balasan untuk meletakkan scripttag di akhir. Seringkali itu bukan masalah, tetapi Anda harus melihat halaman Anda untuk melihat apakah itu benar dan, jika demikian, bagaimana Anda ingin menghadapinya. (Anda dapat meletakkan elemen sebaris kecil di dalamnya yang menyiapkan penangan kejadian di seluruh dokumen untuk mengatasi hal ini. Dengan begitu, Anda mendapatkan waktu muat yang lebih baik tetapi jikascripthead mereka mencoba melakukan sesuatu terlalu dini, Anda dapat memberi tahu mereka itu atau, lebih baik, mengantrekan hal yang ingin mereka lakukan dan melakukannya ketika skrip lengkap Anda siap.)

TJ Crowder
sumber
17
+1. Cara lain untuk menangani interaksi sebelum js dimuat adalah membuat halaman berfungsi tanpa javascript untuk memulai. Pastikan semua tautan berfungsi dll, meskipun tautan itu tentu saja akan memicu pemuatan ulang halaman. Kemudian membajak tautan dan hal-hal lain dengan js, dan menambahkan ajax Anda atau lonceng dan peluit lainnya :)
Adrian Schmidt
1
Bagaimana Anda menangani antrian suatu tindakan? Apakah ada pola desain atau "solusi umum" yang dapat saya perhatikan terkait hal ini?
HC_
@HC_: Apa yang Anda maksud dengan "mengantri suatu tindakan"?
TJ Crowder
@TJCrowder Dari kalimat terakhir jawaban Anda: "atau, lebih baik, antri hal yang ingin mereka lakukan dan lakukan saat skrip lengkap Anda siap." Saya hanya bertanya-tanya, jika ada cara "optimal" untuk melakukan ini, karena saya yakin saya bisa menemukan "beberapa" cara untuk melakukan ini, tetapi saya yakin itu akan ... disukai jika ada orang lain yang pernah melihat kode apa pun yang terlibat.
HC_
2
@HC_: Saya tidak pernah merasa perlu untuk melakukannya, dan tidak tahu standar tertentu untuk itu. Dan lima tahun kemudian, menurut saya lebih baik menggunakan "Maaf, memuat, satu detik .." saja. (Meskipun jika hal-hal yang lambat dimuat, Anda memiliki masalah yang lebih besar.) Jika saya melihat sesuatu yang menurut saya dapat diklik, dan mengkliknya, dan tidak ada yang terjadi, hanya surga yang tahu apa yang akan saya klik berikutnya. Jika Anda mengantrekannya dan memutarnya kembali saat Anda siap, itu bisa ... kurang dari ideal.
TJ Crowder
3

Halaman Anda akan dimuat lebih lambat dengan menyebarkan $(document).ready()skrip di seluruh DOM (bukan semuanya di bagian akhir) karena memerlukan jQuery untuk dimuat secara sinkron terlebih dahulu.

$ = jQuery. Jadi, Anda tidak dapat menggunakan $skrip Anda tanpa memuat jQuery terlebih dahulu. Pendekatan ini memaksa Anda untuk memuat jQuery di dekat bagian awal halaman, yang akan menghentikan pemuatan halaman Anda hingga jQuery diunduh sepenuhnya.

Anda juga tidak dapat asyncmemuat jQuery karena dalam banyak kasus, $(document).ready()skrip Anda akan mencoba dieksekusi sebelum jQuery sepenuhnya async dimuat dan menyebabkan kesalahan, karena sekali lagi, $belum ditentukan.

Karena itu, ada cara untuk mengelabui sistem. Pada dasarnya pengaturan $sama dengan fungsi yang mendorong $(document).ready()fungsi ke dalam antrian / larik. Kemudian di bagian bawah halaman, muat jQuery kemudian lakukan iterasi melalui antrian dan jalankan masing-masing $(document).ready()satu per satu. Ini memungkinkan Anda untuk menunda jQuery ke bagian bawah halaman tetapi masih digunakan $di atasnya di DOM. Saya pribadi belum menguji seberapa baik ini bekerja, tetapi teorinya bagus. Ide ini sudah ada sejak lama, tetapi saya sangat, sangat jarang melihatnya diimplementasikan. Tapi sepertinya ide yang bagus:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Jake Wilson
sumber