Komentar: Pemuatan asinkron dapat dipahami sebagai pemrosesan bersamaan yang tidak memblokir. Di masa lalu, kami menggunakan berbagai teknik JavaScript untuk melakukan ini. Sekarang WebKit telah menerapkan atribut async async dari tag skrip untuk html5. Teman yang tertarik dapat mempelajarinya.
(Catatan penerjemah: pemuatan asinkron dapat dipahami sebagai pemrosesan bersamaan yang tidak blokir.)Salah satu alasan saya senang tentang HTML5 adalah bahwa ia mengimplementasikan banyak fitur yang telah lama ditunggu-tunggu di industri ini. Kami selalu perlu menampilkan prompt kosong di kotak input, tetapi semuanya diimplementasikan dalam JavaScript. Kami juga ingin seluruh blok dapat diklik, yang juga diimplementasikan menggunakan JavaScript.
WebKit sekarang mengimplementasikan properti asinkron asinkron dari tag skrip untuk html5. Di masa lalu kami biasa menggunakan berbagai trik JavaScript untuk melakukan ini, tetapi sekarang properti baru membuatnya relatif mudah untuk mencegah pemblokiran.
Async - atribut html
Seperti yang saya sebutkan sebelumnya, menambahkan atribut async sangat sederhana:
<!-Tentukan async, dan onload callback->
<Script async src = "siteScript.js"> </script>
Faktanya, jika desain JavaScript dan HTML Anda masuk akal, maka 90% dari kasus elemen skrip Anda dapat dimuat secara tidak sinkron.
DISHER - Atribut HTML
Browser Safari Menambahkan Atribut Tambahan Tambahan
<!-Tentukan tunduk, efeknya mirip dengan async->
<Script Disper src = "siteScript.js"> </script>
Perbedaan antara async dan tunduk
Blog Resmi WebKit menjelaskan perbedaan antara Async dan Defer
------------------------------------
Dalam keadaan normal, jika browser menemukan skrip eksternal saat mem -parsing file sumber HTML, proses parsing akan dijeda dan permintaan akan dikirim untuk mengunduh file skrip. Dom Parsing akan terus dilakukan setelah skrip diunduh penuh dan dieksekusi. Misalnya:
<skrip src = myblockingscript.js> </script>
Selama proses pengunduhan, browser diblokir dari melakukan tugas -tugas lain yang berguna, termasuk parsing HTML, menjalankan skrip lain, dan menampilkan tata letak CSS. Meskipun pemindai WebKit Preload dapat mendeteksi multithreading selama fase unduhan, masih ada penundaan jaringan besar untuk beberapa halaman.
Ada banyak teknik untuk meningkatkan kecepatan tampilan halaman, tetapi semuanya memerlukan kode tambahan dan keterampilan khusus browser. Sekarang skrip tidak perlu mengeksekusi skrip secara serempak dengan menambahkan atribut async atau tundukan. Contohnya adalah sebagai berikut:
<Script async src = "myasyncscript.js"> </script>
<Script Disper src = "myDeferscript.js"> </script>
Baik Async maupun Penundaan Skrip Anotasi tidak akan segera diunduh tanpa berhenti HTML Parsing. Keduanya mendukung panggilan balik acara Onload untuk menyelesaikan inisialisasi yang mengharuskan skrip untuk dieksekusi.
Perbedaan antara keduanya adalah perbedaan dalam eksekusi:
Skrip async akan dieksekusi segera setelah file skrip diunduh, dan waktu eksekusi harus sebelum acara pemuatan jendela dipicu. Ini berarti bahwa beberapa skrip async kemungkinan tidak dieksekusi dalam urutan di mana mereka muncul di halaman.
Sebaliknya, browser memastikan bahwa beberapa skrip penundaan dieksekusi dalam urutan kejadiannya di halaman HTML, dan bahwa waktu eksekusi sebelum resolusi DOM selesai dan acara DOMContentloaded dokumen ditembakkan.
Berikut ini adalah contoh yang membutuhkan 1 detik untuk diunduh dan 1 detik untuk menguraikan operasi lain. Kita dapat melihat bahwa seluruh pemuatan halaman memakan waktu sekitar 2 detik.
Contoh yang sama, tetapi kali ini kami menentukan atribut scribe. Karena ketika skrip tunduk diunduh, operasi lain dapat dieksekusi secara paralel, jadi itu sekitar 1 kali lebih cepat.
------------------------------------
Browser mana yang mendukung async dan tunduk
Juga disebutkan dalam artikel yang dikutip di atas:
Selain versi baru browser berdasarkan WebKit, Firefox telah mendukung properti DISFER dan ONLOAD untuk waktu yang lama, dan telah menambahkan atribut ASYNC sejak FF3.6. IE juga mendukung atribut tunduk, tetapi tidak mendukung atribut async. Mulai dari IE9, atribut Onload juga akan didukung.
Aynsc luar biasa!
Saya sangat senang melihat webkit menerapkan async. Pemblokiran adalah hambatan kinerja yang sangat besar untuk setiap situs web, dan dapat secara langsung menentukan file skrip yang tidak diragukan lagi akan mempercepat halaman web.