Rumah > Artikel > hujung hadapan web > Memahami async dan defer

Memahami async dan defer

王林asal: 2024-08-09 01:58:42766semak imbas

Understanding async and defer

Ini adalah salah satu soalan temuduga bahagian hadapan yang popular. Ia menguji pengetahuan orang yang ditemuduga tentang HTML, JS dan Prestasi.

Ini ialah soalan #1 siri Soalan Temuduga Frontend. Jika anda ingin meningkatkan tahap persediaan anda atau kekal dikemas kini secara umum, pertimbangkan untuk mendaftar di FrontendCamp.

Teg skrip digunakan untuk menambahkan JavaScript pada halaman HTML. Ia boleh menjadi skrip sebaris atau skrip luaran.

<body>
  <!-- Some code before it -->

  <script>
    console.log("This is an inline script.");
  </script>

  <script src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

Semasa menghuraikan HTML, jika penyemak imbas menemui teg skrip ia akan menghentikan penghuraian HTML dan mula melaksanakan skrip JS. Jika ia sebaris, ia akan bermula dengan pelaksanaan terus tetapi jika ia adalah skrip luaran, ia akan dimuat turun dan kemudian dilaksanakan.

Pada masa ini, apabila skrip JS sedang dimuat turun dan dilaksanakan, penghuraian HTML disekat. Ia hanya boleh disambung semula setelah penyemak imbas selesai melaksanakan skrip JS.

Adakah anda nampak apa yang tidak kena di sini? Ini akan menyebabkan masalah prestasi untuk pengguna akhir. Jika kami mempunyai banyak skrip atau mana-mana skrip mengambil banyak masa untuk dilaksanakan, pengguna tidak akan melihat kandungan halaman untuk masa yang lama.

Untuk menyelesaikan perkara ini dengan tepat, kami mempunyai dua atribut: async dan defer.

tak segerak

Jika atribut async hadir, skrip akan dimuat turun selari dengan menghurai HTML dan dilaksanakan sebaik sahaja ia tersedia.

Jika berbilang skrip menggunakan atribut tak segerak, susunan pelaksanaan mungkin berbeza daripada susunan skrip tersebut muncul dalam HTML. Skrip yang tersedia dahulu akan dilaksanakan terlebih dahulu.

<body>
  <!-- Some code before it -->

  <script async src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

menangguhkan

Jika atribut tangguh hadir, skrip akan dimuat turun selari dengan penghuraian HTML (sama seperti async) tetapi dilaksanakan selepas penghuraian HTML selesai dan sebelum melancarkan DOMContentLoaded.

Jika berbilang skrip menggunakan atribut tangguh, susunan pelaksanaan akan dikekalkan, tidak seperti async.

<body>
  <!-- Some code before it -->

  <script defer src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

Ringkasan

Kedua-dua async dan tangguhkan skrip muat turun tanpa menyekat penghuraian HTML.
skrip async akan dilaksanakan sebaik sahaja ia tersedia. Ia berkemungkinan menyekat penghuraian HTML.
skrip tangguh hanya akan dilaksanakan setelah penghuraian HTML selesai tetapi sebelum menembak DOMContentLoaded.
Gunakan async, jika susunan pelaksanaan tidak penting dan skrip tidak mengubah suai DOM.
Gunakan tangguh, jika perintah itu adalah pelaksanaan penting atau skrip mengubah suai DOM.
Selain itu, ambil perhatian bahawa atribut ini tidak berfungsi pada skrip sebaris iaitu skrip tanpa atribut src.
Jika async dan defer ditambah, async diutamakan.

Sumber

MDN: Elemen skrip
FrontendCamp

Atas ialah kandungan terperinci Memahami async dan defer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html if for while Attribute JS dom this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Memahami Pengurus Pakej: pnpm vs npm vs yarnArtikel seterusnya：Memahami Pengurus Pakej: pnpm vs npm vs yarn

Artikel berkaitan

Lihat lagi