JavaScript Execution Cost

JavaScript adalah resource paling mahal byte-for-byte. 200KB JS membutuhkan lebih banyak processing daripada 200KB gambar karena JS harus di-parse, compile, dan execute.

Cost Breakdown

1. Download — Transfer dari server (bisa di-compress)
2. Parse — Mengubah text menjadi AST (Abstract Syntax Tree)
3. Compile — JIT compiler mengubah AST menjadi machine code
4. Execute — Menjalankan kode, memanipulasi DOM

Main Thread Blocking

JavaScript berjalan di main thread yang sama dengan rendering. Saat JS berjalan, browser tidak bisa merender. Ini menyebabkan:

• Halaman "freeze" saat script besar di-execute
• Input delay — klik/scroll tidak responsif
• INP score buruk

Solusi

• Code splitting — Hanya load JS yang dibutuhkan
• Tree shaking — Hapus kode yang tidak digunakan
• defer/async — Load script tanpa blocking parsing HTML
• Web Workers — Pindahkan heavy computation ke thread terpisah

<!-- BURUK — blocking -->
<script src="app.js"></script>

<!-- BAIK — non-blocking, execute setelah HTML parsed -->
<script defer src="app.js"></script>

<!-- BAIK — non-blocking, execute ASAP -->
<script async src="analytics.js"></script>