Cara utama untuk memasukkan kode JavaScript ke halaman HTML adalah melalui tag skrip. Ini termasuk dua bentuk. Yang pertama adalah secara langsung memasukkan kode JS antara tag skrip, dan yang kedua adalah memperkenalkan file JS eksternal melalui atribut SRC. Karena juru bahasa memblokir render dari sisa halaman selama penguraian dan pelaksanaan kode JS, itu akan menyebabkan pengosongan jangka panjang dan penundaan untuk halaman dengan sejumlah besar kode JS. Untuk menghindari masalah ini, disarankan untuk menempatkan semua referensi JS sebelum tag </body>.
Ada dua atribut tag skrip, tunduk dan async, sehingga penggunaan tag skrip dibagi menjadi tiga situasi:
1. <skrip src = "example.js"> </script>
Tanpa atribut penundaan atau async, browser akan segera memuat dan menjalankan skrip yang sesuai. Dengan kata lain, sebelum memberikan dokumen setelah tag skrip, Anda tidak menunggu pemuatan elemen dokumen berikutnya, dan mulai memuat dan mengeksekusi setelah membacanya. Ini akan memblokir pemuatan dokumen selanjutnya;
2. <skrip async src = "example.js"> </script>
Dengan atribut async, itu berarti bahwa pemuatan dan rendering dokumen selanjutnya dilakukan secara paralel dengan pemuatan dan pelaksanaan skrip JS, yaitu, eksekusi asinkron;
3. <skrip tunduk src = "example.js"> </script>
Dengan atribut tunduk, proses pemuatan dokumen berikutnya dan pemuatan skrip JS (hanya memuat tetapi tidak dieksekusi pada saat ini) dilakukan secara paralel (secara tidak sinkron). Eksekusi skrip JS perlu menunggu sampai semua elemen dokumen diuraikan dan sebelum acara DomContentloaded memicu eksekusi.
Gambar berikut dapat secara intuitif melihat perbedaan antara ketiganya:
Di antara mereka, Blue mewakili waktu pemuatan jaringan skrip JS, merah mewakili waktu eksekusi skrip JS, dan hijau mewakili resolusi HTML.
Dari gambar kami dapat memperjelas poin -poin berikut:
1. Tunda dan async konsisten dalam proses pemuatan jaringan dan keduanya dieksekusi secara tidak sinkron;
2. Perbedaan antara keduanya adalah ketika skrip dieksekusi setelah dimuat. Dapat dilihat bahwa penundaan lebih sesuai dengan persyaratan sebagian besar skenario untuk pemuatan dan eksekusi skrip aplikasi;
3. Jika ada beberapa skrip dengan atribut tunduk, mereka menjalankan skrip dalam urutan beban; Untuk async, pemuatan dan eksekusi terkait erat. Terlepas dari perintah deklarasi, itu akan dieksekusi segera selama beban selesai. Ini tidak banyak berguna untuk skrip aplikasi karena tidak mempertimbangkan ketergantungan sama sekali.
ringkasan:
Titik umum antara penundaan dan async adalah bahwa mereka dapat memuat file JS secara paralel dan tidak akan memblokir pemuatan halaman. Perbedaannya adalah bahwa setelah penundaan dimuat, JS akan menunggu seluruh halaman dimuat sebelum dieksekusi. Async akan menjalankan JS segera setelah memuat. Oleh karena itu, jika ada urutan eksekusi JS yang ketat, disarankan untuk menggunakan tundukan untuk memuat.
Di atas adalah penjelasan terperinci tentang perbedaan antara atribut penundaan dan async dalam JS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!