Menguasai Teg Skrip: Menggunakan Async dan Defer untuk Kawalan Skrip Tepat

Dalam dunia pembangunan web, mengoptimumkan masa muat halaman adalah penting. Dua sifat kuat teg – async dan defer – boleh memberi kesan ketara kepada prestasi tapak web anda. Menggunakan atribut ini tanpa memahaminya secara menyeluruh boleh menjejaskan prestasi dan membawa kepada pepijat. Mari kita mulakan dari asas dan pelajari perkara yang dilakukan oleh atribut ini dan masa untuk menggunakannya.

Asas: Bagaimana Skrip Dimuatkan

Secara lalai, apabila penyemak imbas menemui tag, ia:

1. Menjeda penghuraian HTML
2. Memuat turun skrip
3. Melaksanakan skrip
4. Menyambung semula penghuraian HTML

Proses ini boleh melambatkan pemaparan halaman, terutamanya untuk skrip besar atau sambungan perlahan. Selain itu, ia boleh membawa kepada pepijat jika skrip berjalan sebelum elemen HTML tertentu dimuatkan sepenuhnya, yang sering berlaku jika skrip tidak diletakkan dengan betul dalam dokumen.

Async dan Defer: Pedang Bermata Dua

Async

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

• Apa yang dilakukannya: Memuat turun skrip secara tidak segerak semasa penghuraian HTML diteruskan.
• Apabila ia dilaksanakan: Sebaik sahaja ia dimuat turun, jeda penghuraian HTML.
• Apabila ia digunakan: Skrip bebas yang tidak bergantung pada skrip lain atau kandungan DOM.
• Kaveat: Boleh melaksanakan di luar perintah, berpotensi memecahkan kebergantungan.

Menangguhkan

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

• Apa yang dilakukan: Memuat turun skrip semasa penghuraian HTML diteruskan.
• Apabila ia dilaksanakan: Selepas penghuraian HTML selesai, tetapi sebelum acara DOMContentLoaded.
• Apabila ia digunakan: Skrip yang bergantung pada kandungan DOM atau perlu dilaksanakan dalam susunan tertentu.
• Kaveat: Boleh menangguhkan pelaksanaan fungsi kritikal.

Membandingkan Tingkah Laku

Attribute	Download	Execution	HTML Parsing	Main Risk
None	Blocks	Immediate	Paused	Slow Initial Render
Async	Parallel	ASAP	Paused when downloaded	Race Conditions
Defer	Parallel	After HTML	Continues	Delayed Functionality

Urutan Pelaksanaan: Async, Defer, dan Kedua-duanya

Memahami susunan pelaksanaan untuk skrip dengan atribut yang berbeza adalah penting untuk mengurus kebergantungan dan memastikan kefungsian yang betul. Begini caranya:

1. Skrip biasa (tiada async atau tangguh):

   • Laksanakan mengikut susunan yang dipaparkan dalam dokumen.
   • Sekat penghuraian HTML sehingga ia dimuat turun dan dilaksanakan.

2. Skrip Async:

   • Muat turun secara selari dan laksanakan sebaik sahaja ia tersedia.
   • Tiada perintah pelaksanaan yang dijamin; ia dijalankan sebaik sahaja ia dimuat turun.
   • Boleh laksana sebelum DOM dimuatkan sepenuhnya.

3. Tangguhkan skrip:

   • Muat turun secara selari tetapi jalankan hanya selepas penghuraian HTML selesai.
   • Laksanakan mengikut susunan yang dipaparkan dalam dokumen.
   • Jalankan sebelum acara DOMContentLoaded.

4. Skrip dengan tak segerak dan tangguh:

   • Atribut async diutamakan dalam penyemak imbas moden.
   • Dalam penyemak imbas lama yang tidak menyokong async, mereka kembali untuk menangguhkan gelagat.

Contoh Perintah Pelaksanaan:

<script src="1.js"></script>
<script async src="2.js"></script>
<script async src="3.js"></script>
<script defer src="4.js"></script>
<script defer src="5.js"></script>

Perintah pelaksanaan yang mungkin:

1. 1.js (penghuraian blok)
2. 3.js atau 2.js (mana-mana muat turun dahulu)
3. 2.js atau 3.js (mana-mana muat turun saat)
4. 4.js
5. 5.js

Perhatikan bahawa 2 dan 3 boleh dilaksanakan dalam sebarang susunan atau sebelum 1 jika 1.js mengambil masa yang lebih lama untuk dimuat turun.

Amalan Terbaik

1. Gunakan async untuk skrip bebas seperti analitis.
2. Gunakan tangguh untuk skrip yang bergantung pada DOM atau skrip lain.
3. Letakkan skrip dalam dengan async atau tangguhkan untuk mula memuat turun awal.
4. Untuk skrip kritikal, pertimbangkan skrip sebaris dalam .

Sokongan Pelayar

Kedua-dua async dan defer disokong secara meluas dalam penyemak imbas moden. Untuk penyemak imbas yang lebih lama, pertimbangkan untuk menggunakan pemuat skrip atau meletakkan skrip di hujung .

Atas ialah kandungan terperinci Menguasai Teg Skrip: Menggunakan Async dan Defer untuk Kawalan Skrip Tepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!