Menghubungkan JS ke HTML: Tag <script> In-body vs In-head (Defer/Async)
Setelah struktur HTML Anda rapi dan gaya CSS (seperti Tailwind) sudah diterapkan, langkah selanjutnya adalah menghidupkan website tersebut dengan JavaScript. Entah itu untuk membuat tombol dark mode di portal SatuMedia atau memvalidasi form akta di aplikasi Kolak Pisang, Anda harus menghubungkan file JS ke dokumen HTML Anda.
Secara historis, di mana kita meletakkan tag <script> selalu menjadi perdebatan besar karena berdampak langsung pada kecepatan pemuatan halaman (page load performance). Mari kita bedah evolusinya dari cara tradisional hingga cara modern.
1. Cara Dasar Menghubungkan JavaScript
Untuk menyisipkan JavaScript, kita menggunakan tag <script>. Anda bisa menulis kode langsung di dalamnya, namun praktik terbaik adalah memisahkannya ke dalam file eksternal (misal: app.js) dan memanggilnya menggunakan atribut src.
<script src="app.js"></script>
Masalah utamanya adalah: Di bagian mana dari HTML kita harus meletakkan kode ini? Browser membaca HTML dari atas ke bawah. Saat browser menemukan tag <script>, ia akan berhenti membaca HTML (Parsing Paused), mengunduh file JS tersebut, mengeksekusinya, lalu baru melanjutkan membaca HTML yang tersisa. Ini disebut Render-Blocking.
2. Cara Tradisional (Tanpa Atribut Modern)
A. In-Head (Sangat Tidak Disarankan)
Dahulu, developer sering menaruh script di dalam <head>.
<head> <title>Website Saya</title> <script src="app.js"></script> </head>
<body> <h1>Konten Website</h1>
</body>
-
Dampak: Layar pengguna akan putih kosong (blank screen) sampai file
app.jsselesai diunduh dan dijalankan. Selain itu, JS tidak bisa memanipulasi elemen<h1>karena saat JS berjalan,<h1>belum digambar oleh browser.
B. In-Body (Standar Lama yang Aman)
Untuk mengatasi layar putih, pengembang mulai memindahkan tag <script> ke bagian paling bawah dokumen, tepat sebelum tag penutup </body>.
<body> <h1>Konten Website</h1> <script src="app.js"></script>
</body>
-
Kelebihan: Pengguna bisa langsung melihat tampilan website (HTML/CSS) tanpa harus menunggu JS.
-
Kekurangan: File JS baru mulai diunduh di akhir. Jika file JS-nya besar, fitur interaktif website akan terlambat berfungsi.
3. Cara Modern: Atribut defer dan async
Untuk menyelesaikan masalah "telat unduh" pada metode In-Body, HTML5 memperkenalkan dua atribut sakti yang diletakkan di dalam <head>. Keduanya memungkinkan browser mengunduh file JS di latar belakang tanpa menghentikan pembacaan HTML!
A. Atribut async (Asynchronous / Bebas & Liar)
Dengan async, file JS diunduh secara paralel dengan pembacaan HTML. Namun, begitu file selesai diunduh, browser akan menghentikan sementara HTML untuk langsung menjalankan JS tersebut.
<head> <script async src="analytics.js"></script>
</head>
-
Sifat: Tidak peduli urutan. Jika Anda punya 3 file dengan
async, file yang ukurannya paling kecil akan selesai dan dieksekusi lebih dulu. -
Kapan Digunakan: Sangat cocok untuk script pihak ketiga yang tidak bergantung pada elemen HTML atau script lain, seperti Google Analytics atau tracker iklan.
B. Atribut defer (Deferred / Sopan & Teratur)
Sama seperti async, defer mengunduh file secara paralel di latar belakang. Bedanya, defer berjanji tidak akan menjalankan JS sampai seluruh HTML selesai dibaca.
<head> <script defer src="library.js"></script> <script defer src="app.js"></script>
</head>
-
Sifat: Teratur. Menjamin script dieksekusi sesuai urutan Anda menulisnya di HTML, dan menjamin seluruh elemen DOM (HTML) sudah tersedia.
-
Kapan Digunakan: Ini adalah standar emas saat ini untuk hampir semua file JavaScript Anda sendiri. Selalu gunakan
deferdi dalam<head>.
Ringkasan Kapan Menggunakan Apa
| Metode | Posisi Tag | Perilaku Unduh | Perilaku Eksekusi | Kapan Digunakan? |
| Normal | Akhir <body> |
Menunggu HTML selesai | Langsung (Menghentikan HTML jika belum selesai) | Hanya untuk dukung browser super jadul. |
async |
Dalam <head> |
Paralel (Di latar belakang) | Langsung saat unduhan selesai (Bisa acak urutannya) | Script mandiri (Analytics, Ads). |
defer |
Dalam <head> |
Paralel (Di latar belakang) | Menunggu HTML 100% selesai, dieksekusi sesuai urutan | Rekomendasi Utama untuk kode aplikasi/UI Anda. |
Eksplorasi Interaktif: Simulator Timeline Rendering Browser
Konsep Render-Blocking ini kadang sulit dibayangkan hanya dengan kata-kata. Mari gunakan simulator di bawah ini untuk melihat langsung bagaimana browser (seperti Chrome atau Safari) bekerja saat memproses HTML, mengunduh file JS, dan menjalankan JS berdasarkan metode yang Anda pilih.
