Belajar HTML - Memasukkan JavaScript dengan Script, defer dan async
Episode ini membedah elemen script: skrip inline dan eksternal, urutan eksekusi yang memblokir render, atribut defer dan async, serta module yang berjalan lebih lambat namun lebih aman.
#Pendahuluan
HTML menyusun konten, CSS menghiasnya, dan JavaScript memberinya perilaku. Episode 14 membahas memasukkan JavaScript dengan script, defer, dan async — cara terbaik menautkan skrip ke halaman agar halaman tetap cepat.
Posisi dan atribut script menentukan kapan JavaScript dieksekusi dan apakah memblokir rendering. Kesalahan umum — seperti meletakkan skrip besar di head tanpa defer — membuat halaman tampak lambat padahal markupnya kecil.
#Elemen script
#Skrip Inline dan Eksternal
JavaScript disisipkan dua cara. Inline:
<script>
console.log("Halaman dimuat");
</script>Eksternal, memakai atribut src:
<script src="js/app.js"></script>Skrip eksternal lebih baik untuk kode yang dipakai ulang: bisa di-cache, terpisah dari markup, dan lebih mudah dirawat. Halaman HTML dengan kode JavaScript panjang di dalamnya cepat menjadi tidak terbaca.
#Script di akhir body
Aturan klasik: letakkan script di akhir body, setelah konten. Saat skrip dieksekusi, seluruh DOM sudah tersedia:
<body>
<h1>Judul</h1>
<p>Konten.</p>
<script src="js/app.js"></script>
</body>#Mengapa Posisi Penting
#Script Memblokir Parsing
Ketika browser bertemu script tanpa atribut khusus, ia berhenti memparsing HTML, mengunduh dan mengeksekusi skrip, baru melanjutkan. Akibatnya konten di bawah skrip tampak tertunda. Semakin besar skripnya, semakin lambat halaman terasa.
<head>
<script src="js/besar.js"></script>
</head>Konten body menunggu besar.js selesai sebelum dirender — buruk untuk halaman yang kontennya penting di atas lipatan.
#defer dan async
#defer: Jalankan Setelah Parsing
defer memberi tahu browser untuk mengunduh skrip sambil tetap memparsing dokumen, lalu mengeksekusinya setelah parsing selesai, sebelum event DOMContentLoaded:
<head>
<script defer src="js/app.js"></script>
</head>Dengan defer, posisi script tidak lagi penting — aman diletakkan di head dan tetap mengeksekusi setelah dokumen selesai diparsing. Skrip defer dieksekusi sesuai urutan kemunculannya.
#async: Jalankan Begitu Siap
async mengunduh skrip tanpa memblokir parsing dan mengeksekusinya begitu unduhan selesai — tanpa menunggu dokumen dan tanpa urutan tertentu:
<head>
<script async src="js/analitik.js"></script>
</head>async cocok untuk skrip yang berdiri sendiri dan tidak bergantung pada DOM atau skrip lain — misalnya skrip analitik atau iklan. Skrip yang butuh DOM tidak aman memakai async.
#Kapan Memakai Yang Mana
- Tanpa atribut: skrip kecil yang harus jalan saat itu juga, di akhir
body. defer: skrip utama aplikasi yang butuh DOM penuh.async: skrip independen yang tidak bergantung pada yang lain.
#type="module"
#Skrip Modern yang Lebih Disiplin
Atribut type="module" membuat skrip diperlakukan sebagai modul ECMAScript. Skrip module otomatis defer, berjalan dalam strict mode, dan bisa menggunakan import dan export:
<script type="module" src="js/main.js"></script>Karena otomatis defer, modul tidak memblokir parsing. Gunakan type="module" untuk aplikasi JavaScript modern; async juga bisa dikombinasikan untuk modul independen.
#Latihan: Tombol yang Merespons
Buat halaman dengan skrip eksternal yang memakai defer:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tombol Sapa</title>
<script defer src="js/sapa.js"></script>
</head>
<body>
<h1>Tombol Sapa</h1>
<p id="pesan"></p>
<button type="button" id="tombol">Sapa Saya</button>
</body>
</html>Isi js/sapa.js:
const tombol = document.getElementById("tombol");
const pesan = document.getElementById("pesan");
tombol.addEventListener("click", () => {
pesan.textContent = "Halo, terima kasih sudah menekan tombol!";
});Jalankan server lokal dengan python3 -m http.server 8080, buka halaman, dan klik tombol. Karena defer, js/sapa.js mengeksekusi setelah seluruh DOM siap — getElementById pasti menemukan elemennya.
#Kesalahan Umum dan Solusinya
#Script Besar di head Tanpa defer
Ini penyebab halaman terasa lambat. Letakkan di akhir body atau tambahkan defer.
#Memakai async untuk Skrip yang Butuh DOM
async mengeksekusi tanpa jaminan DOM siap. Untuk skrip yang mengakses elemen, pakai defer atau DOMContentLoaded.
#Penutup
Episode 14 memberi perilaku pada halaman kalian: script inline dan eksternal, posisi di akhir body, defer untuk eksekusi setelah parsing, async untuk skrip independen, dan type="module" untuk aplikasi modern.
Inti yang harus dibawa pulang:
- Skrip tanpa atribut memblokir parsing; letakkan di akhir
body. defermengeksekusi setelah dokumen selesai diparsing, sesuai urutan.asyncmengeksekusi begitu unduhan selesai, tanpa urutan.- Skrip yang butuh DOM memakai
defer; skrip independen memakaiasync. type="module"otomatisdeferdan mendukungimport.
Di episode 15 selanjutnya kita akan membahas elemen interaktif modern — details dan summary untuk akordeon tanpa JavaScript, serta dialog untuk modal yang mudah diakses.