Pertanyaan Mengapa jQuery.sudah disarankan saat sangat lambat?


Saya sudah bertanya a pertanyaan serupa sebelumnya, tetapi saya tidak pernah menjelaskan maksud saya dengan jelas, atau setidaknya saya pikir itu adalah pertanyaan yang relevan sehingga perlu untuk memunculkannya dan melihat apakah ada yang dapat memberikan beberapa pemikiran yang mendalam.

Saat menggunakan jQuery, banyak dari kita menggunakan jQuery.ready berfungsi untuk mengeksekusi init ketika DOM telah dimuat. Ini telah menjadi cara standar de-facto untuk menambahkan program manipulasi DOM ke halaman web menggunakan jQuery. Peristiwa terkait ada secara asli beberapa browser, tetapi jQuery mengemulasikannya di browser lain, seperti beberapa versi IE. Contoh:

<head>
<script>
    var init = function() { alert('hello world'); };
    $.ready(init);
</script>

Sekarang, semua tes kami menunjukkan bahwa acara ini bisa sangat lambat. Tidak sepelan window.onload, tetapi masih sering sekitar 100 md penundaan sebelum eksekusi. Jika FF dapat mencapai 200-300 ms, terutama saat disegarkan.

Ini adalah beberapa milidetik yang sangat penting, karena ini adalah jumlah waktu tata letak awal ditampilkan sebelum manipulasi DOM dilakukan (seperti menyembunyikan dropdown). Sering kali, tata letak "flicker" terutama disebabkan oleh penggunaan DOM yang lambat siap, memaksa pemrogram untuk menyembunyikan elemen menggunakan CSS dan berpotensi membuatnya kurang dapat diakses.

Sekarang jika kita menempatkan fungsi init di tag skrip sebelum menutup tag body, tag akan dieksekusi lebih cepat, biasanya sekitar separuh waktu, tetapi terkadang lebih cepat:

<head>
<script>
    var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>

Halaman pengujian sederhana yang membuktikan perbedaan: http://jsbin.com/aqifon/10

Maksud saya, kami tidak berbicara tentang perbedaan yang hampir tidak terlihat karena beberapa "polisi optimisasi" mempromosikan ketika datang untuk menggunakan pemilih yang efektif. Kami berbicara tentang beberapa penundaan utama ketika melakukan manipulasi DOM onload. Mencoba contoh ini dalam FF, domready kadang-kadang bisa lebih dari 100 kali lebih lambat (300ms vs 2ms).

Sekarang pertanyaan saya: Kenapa jQuery.ready disarankan untuk digunakan saat itu jelas jauh lebih lambat daripada alternatif lain? Dan apa kelemahan dari memanggil init sebelum menutup BODY vs menggunakan jQuery.ready? Ini bisa dibilang lebih "aman" untuk digunakan domReady, tetapi dalam konteks apa itu lebih aman daripada opsi lainnya? (Saya memikirkan hal-hal seperti itu document.write dan skrip yang ditangguhkan) Kami telah menggunakan BODY cara selama hampir 5 tahun di banyak situs klien, dan kami tidak pernah mengalami masalah. Hanya jauh lebih cepat.

Saya juga bertanya-tanya, karena ada begitu banyak fuzz tentang jsPerf dan mengoptimalkan pemilih untuk beberapa ms per 10.000 eksekusi, kenapa tidak banyak bicara tentang ini? Pada dasarnya ini merupakan penundaan pertama yang dihadapi pengguna, dan tampaknya cukup mudah untuk mengiris 50-100 ms pada setiap pemuatan halaman ...


32
2018-03-04 18:55


asal


Jawaban:


Ke intinya dulu:

Tidak, tidak ada kerugian dalam menghubungi Anda init sebelum menutup <body>. Itu akan seperti yang Anda perhatikan tampil lebih baik yang mengandalkan $.ready() dan juga akan bekerja dengan semua browser tanpa masalah (bahkan pada IE).

Namun, ada beberapa alasan untuk digunakan $.ready(), yang dalam kasus Anda mungkin tidak berlaku:

  1. $.ready()memudahkan pengembang untuk melakukan hal-hal dalam urutan yang benar. Khususnya, yang penting adalah tidak mereferensikan elemen DOM yang belum dimuat. Meskipun ini cukup sederhana, banyak pengembang masih merasa bingung. $.ready() adalah no-brainer, meskipun yang lambat.
  2. Di Anda telah mengatakan beberapa skrip yang perlu init(), belum tentu mudah / nyaman untuk secara manual lakukan itu di akhir tubuhmu. Ini membutuhkan disiplin dan pengetahuan tentang apa yang dilakukan skrip ini. Secara khusus Anda akan sering melihat $.ready() di pustaka bergantung pada jQuery, karena itu membuat semuanya berfungsi tidak peduli apa yang akan digunakan pengembang untuk memuat libs.
  3. Dengan Asynchronous Module Definition (misalnya require.js) menjadi populer sebagai cara untuk memuat javascript Anda, akhir <body/> metode tidak dijamin.

8
2018-03-04 20:40



Salah satu keuntungannya adalah, Anda dapat menempatkan kode di mana saja di halaman. Dalam kasus kami, kami menggunakan sistem templating di CMS kami yang menyatukan halaman bersama-sama dari sekitar 10 - 30 templat untuk bagian yang berbeda (tergantung pada kerumitan).

Karena Anda ingin templat berfungsi di laman mana pun yang digunakan, Anda perlu menyertakan Javascript yang diperlukan di dalamnya. Untuk kasus-kasus itu, itu ready() fungsi adalah penghemat kehidupan nyata.


6
2018-03-04 19:01



Jika Anda telah menulis file JS yang orang lain termasuk dalam halaman mereka, lebih aman untuk menggunakan document.ready dalam file itu (dengan asumsi itu perlu melakukan beberapa pemrosesan secara otomatis setelah DOM siap) karena Anda tidak dapat memastikan apakah file akan dimasukkan di kepala atau di ujung tubuh.

Ketika datang ke halaman yang Anda memiliki kendali penuh maka jelas Anda tidak memiliki kekhawatiran itu, jadi saya tidak melihat bahwa itu lebih "aman" untuk menggunakan document.ready daripada menelepon Anda init() dari ujung tubuh. Menggunakan document.ready (atau onload) dan menempatkan skrip di ujung tubuh adalah dua cara paling umum untuk melakukannya, dan itu biasa karena keduanya berfungsi dengan baik.

Anda sebutkan document.write() sebagai kemungkinan pengecualian, tetapi Anda tidak ingin memanggil itu dari dokumen. siap atau di bagian akhir bodi karena salah satu cara seluruh halaman telah diuraikan.


2
2018-03-04 20:38



Karena itu membuat domReady dan window.load lebih lambat.

Sangat mudah untuk mengoptimalkan ke metrik, daripada pengalaman pengguna yang sebenarnya. Jadi, grafik "pengoptimalan pengguna nyata" turun, meskipun interaktivitas tertunda.


0
2017-11-13 00:26