Terangkan atribut `async` dan` Defer` untuk skrip dalam HTML5.

Perbezaan antara async dan menangguhkan adalah masa pelaksanaan skrip. Async membolehkan skrip dimuat turun selari dan dilaksanakan dengan segera selepas memuat turun, tanpa menjamin perintah pelaksanaan; Defer melaksanakan skrip dalam rangka selepas parsing HTML selesai. Kedua -duanya mengelakkan menyekat parsing HTML. Menggunakan Async sesuai untuk skrip mandiri seperti menganalisis kod; Defer sesuai untuk senario di mana anda perlu mengakses DOM atau bergantung pada skrip lain.

Apabila anda menambah JavaScript ke halaman HTML, menggunakan atribut async atau defer boleh membuat perbezaan yang nyata dalam bagaimana halaman anda memuat dan berfungsi. Kedua -dua atribut ini mengawal bagaimana penyemak imbas mengendalikan pemuatan dan pelaksanaan skrip, terutamanya semasa penguraian dokumen HTML.

Inilah yang mereka lakukan secara pendek:

• async membuat beban skrip selari dengan parsing HTML dan melaksanakannya sebaik sahaja ia dimuat turun - tanpa menunggu parsing HTML selesai.
• defer juga memuat skrip sementara HTML sedang dihuraikan, tetapi ia menunggu sehingga seluruh dokumen HTML dihuraikan sebelum menjalankan skrip.

Mari kita terperinci tentang kapan dan mengapa anda menggunakan setiap satu.

Apa yang berlaku tanpa async atau defer

Secara lalai, apabila penyemak imbas menemui tag <script></script> (tanpa sebarang atribut), ia berhenti menghuraikan HTML. Ia memuat turun dan menjalankan skrip dengan segera. Hanya selepas skrip selesai melaksanakan pelayar terus membina DOM.

Tingkah laku ini boleh menyebabkan kelewatan dalam membuat halaman, terutamanya jika skripnya besar atau mengambil masa untuk dimuat turun. Itulah sebabnya async dan defer diperkenalkan - untuk mengelakkan menyekat parser.

Bagaimana async berfungsi

Atribut async memberitahu penyemak imbas bahawa skrip tidak bergantung pada kandungan halaman atau skrip lain. Jadi penyemak imbas boleh:

• Muat turun skrip di latar belakang semasa ia terus menghuraikan html
• Jalankan skrip sebaik sahaja ia selesai memuat turun
• Hentikan HTML Parsing cukup lama untuk melaksanakan skrip

Kerana tingkah laku ini, async lebih baik digunakan untuk skrip yang benar -benar bebas - seperti pelacak analisis atau widget mudah yang tidak berinteraksi dengan kandungan halaman.

Contoh:

 <script src = "analytics.js" async> </script>

Nota Penting:

• Perintah pelaksanaan tidak dijamin untuk pelbagai skrip async
• Mereka berlari sebaik sahaja mereka siap, bukan mengikut urutan yang mereka tampilkan di HTML

Bagaimana defer berfungsi

Dengan defer , skrip juga memuat turun di latar belakang semasa parsing HTML. Tetapi bukannya berjalan segera, ia menunggu sehingga seluruh dokumen HTML telah dihuraikan.

Ini bermaksud:

• HTML Parsing terus tidak terganggu
• Skrip dilaksanakan mengikut urutan yang mereka tampilkan dalam dokumen
• Pelaksanaan berlaku selepas DOM dibina sepenuhnya tetapi sebelum acara DOMContentLoaded

Ini sesuai untuk skrip yang perlu mengakses atau memanipulasi DOM, atau bergantung pada skrip tertunda yang lain.

Contoh:

 <script src = "main.js" defer> </script>

Mata Utama:

• defer pesanan pelaksanaan yang mengekalkan
• Ia memastikan Dom sudah siap apabila skrip berjalan
• Tidak perlu menunggu secara manual untuk DOMContentLoaded di dalam skrip

Bila Menggunakan Yang

Memilih antara async dan defer bergantung kepada skrip yang dilakukan dan sama ada ia bergantung kepada apa -apa lagi.

Gunakan async jika:

• Skrip tidak bergantung pada Dom atau skrip lain
• Anda mahu ia berjalan secepat mungkin setelah dimuat turun
• Ini seperti kod penjejakan atau widget pihak ketiga

Gunakan defer jika:

• Skrip perlu mengakses atau mengubah suai DOM
• Ia bergantung pada skrip lain (terutama yang lebih awal di halaman)
• Anda ingin memastikan pelaksanaan berlaku dalam urutan tertentu

Jika skrip kecil dan kritikal, kadang -kadang lebih baik untuk menyamakannya dalam blok <script></script> dan bukannya memuatkannya secara luaran - tetapi itu topik lain.

Ringkasan Perbandingan Cepat

Oleh itu, pada dasarnya, pilih async apabila skrip boleh berjalan pada bila -bila masa, dan defer apabila perlu menunggu halaman tersebut. Kedua-duanya membantu meningkatkan prestasi dengan mengelakkan JavaScript menyekat-dan itu menjadikan pengalaman pengguna yang lebih baik.

Itu sahaja. Tidak terlalu rumit apabila anda mendapat gantungnya.

Atas ialah kandungan terperinci Terangkan atribut `async` dan` Defer` untuk skrip dalam HTML5.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!