Atribut async dan defer
Muat skrip tanpa menghambat penguraian HTML.
Atribut async dan defer adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Perilaku Skrip Bawaan
<script src="..."> biasa tanpa async atau defer memblokir penguraian HTML saat diunduh dan dijalankan. Perenderan semua hal di bawah skrip tersebut dijeda, sehingga secara tradisional skrip ditempatkan di bagian bawah <body>.
async Mengunduh secara Paralel
<script async src="..."> mengunduh skrip secara paralel dengan penguraian HTML dan menjalankannya segera setelah tiba. Eksekusi tetap menjeda penguraian HTML, tetapi hanya sebentar—skrip tersebut tidak memblokir pengunduhan sumber daya lain.
Urutan Eksekusi async Tidak Dapat Diprediksi
Dua skrip async berjalan dalam urutan apa pun yang selesai diunduh lebih dahulu. Jangan pernah menggunakan async untuk skrip yang saling bergantung (jQuery sebelum pengaya jQuery), karena dependensi tersebut dapat berjalan sebelum prasyaratnya tersedia.
defer Menunggu HTML
<script defer src="..."> mengunduh secara paralel seperti async, tetapi eksekusinya ditunda sampai HTML selesai diurai—tepat sebelum peristiwa DOMContentLoaded. Skrip tersebut tidak pernah memblokir penguraian.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer Mempertahankan Urutan
Beberapa skrip defer dijalankan sesuai urutan deklarasinya, seperti skrip biasa di akhir body. Hal ini menjadikan defer pilihan yang tepat untuk skrip yang saling bergantung: utilitas dimuat sebelum skrip pemakainya tanpa orkestrasi manual.
Memilih antara async dan defer
Gunakan async untuk cuplikan pihak ketiga yang independen (analitik, iklan) yang tidak menyentuh DOM dan tidak memiliki dependensi. Gunakan defer untuk kode aplikasi Anda sendiri yang memerlukan DOM dan bergantung pada skrip lain.
Modul Ditunda secara Bawaan
<script type="module"> secara otomatis berperilaku seperti defer—mengunduh secara paralel, dijalankan setelah penguraian, dan mempertahankan urutan. Menambahkan defer ke modul diperbolehkan tetapi tidak diperlukan; menambahkan async mengembalikan perilaku async.
Skrip Sebaris Mengabaikan async/defer
async dan defer hanya berlaku untuk skrip eksternal (yang memiliki src). Tag <script> sebaris langsung dijalankan terlepas dari atributnya, sehingga atribut tersebut diabaikan begitu saja untuk <script>console.log(1)</script>.
Penempatan Menjadi Kurang Penting
Dengan defer (atau modul), tag <script> dapat ditempatkan di <head> tanpa memblokir penguraian—dan menempatkannya di sana memungkinkan peramban menemukan serta mulai mengunduhnya lebih awal daripada jika ditempatkan di bagian bawah <body>.
<head>
<script defer src="app.js"></script>
</head>Menggabungkan dengan preload
Untuk skrip yang sensitif terhadap latensi, pasangkan <link rel="preload" as="script" href="..."> di head dengan <script> yang ditunda di bawahnya. Preload segera memulai pengunduhan, sedangkan defer memastikan urutan eksekusi tetap benar.
Kesalahan Umum
Menandai skrip sebagai async tanpa memastikan bahwa skrip tersebut tidak memiliki dependensi sama sekali merupakan penyebab paling umum kondisi balapan "berjalan di komputer saya, rusak di produksi". Jika ragu, pilih defer—perilakunya lebih toleran, sedangkan async sangat ketat.
Pemeriksaan Pengetahuan
Apa perbedaan async dan defer untuk dua skrip ketika skrip kedua bergantung pada skrip pertama?
Ringkasan
async dan defer sama-sama mengunduh skrip secara paralel dengan penguraian HTML. async dijalankan segera saat tiba dalam urutan yang tidak dapat diprediksi—gunakan untuk cuplikan pihak ketiga yang independen. defer dijalankan setelah penguraian sesuai urutan deklarasi—gunakan untuk kode aplikasi yang memiliki dependensi. Modul secara bawaan berperilaku seperti defer.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Atribut async dan defer” gratis?
Ya — teks lengkap “Atribut async dan defer” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Atribut async dan defer”?
Muat skrip tanpa menghambat penguraian HTML. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Atribut async dan defer” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Atribut async dan defer
- Preload Prefetch dan Preconnect
- Pemuatan Malas Gambar loading=lazy
- Petunjuk Sumber Daya modulepreload