Skip to main content

Penjelasan singkat tentang Asynchronous dan Deferred JavaScript


Ketika melakukan Optimasi Kecepatan Website, JavaScript sering kali dianggap sebagai "Parser Blocking Resource". Ini berarti bahwa penguraian dokumen HTML itu sendiri diblokir oleh JavaScript. Ketika parser mencapai tag <script>, apakah itu internal atau eksternal, maka proses akan berhenti untuk mengambil (jika ada eksternal) dan menjalankannya.

Perilaku ini bisa menjadi masalah jika kita memuat beberapa file JavaScript di halaman, karena ini akan mengganggu waktu untuk render file meskipun dokumen sebenarnya tidak bergantung pada file tersebut. Untungnya, elemen <script> memiliki dua atribut, async dan defer, yang dapat memberi kita kontrol lebih terhadap bagaimana dan kapan file eksternal diambil dan dijalankan. Atribut async dan defer untuk elemen <script> memiliki manfaat yang besar sekarang, jadi inilah saatnya untuk mempelajari dengan tepat apa saja kegunaannya!

Eksekusi Normal <script>

Mari kita mulai dengan mendefinisikan apa itu <script> tanpa atribut apa pun. Penguraian HTML dihentikan sementara agar skrip diambil dan dijalankan, sehingga memperpanjang jumlah waktu yang diperlukan untuk sampai pada tampilan awal.

Sebelum melihat efek dari kedua atribut tersebut, pertama-tama kita harus melihat apa yang terjadi dalam keadaan normal. Secara default, seperti yang disebutkan di atas, file JavaScript akan mengganggu penguraian dokumen HTML agar bisa diambil (jika tidak inline) dan dieksekusi.

Atribut async <script async>

Atribut async digunakan untuk menunjukkan ke browser bahwa file skrip dapat dieksekusi secara asinkron. Parser HTML tidak perlu menunggu pada titik yang memiliki tag skrip untuk diambil dan dijalankan, eksekusi dapat terjadi kapan pun. Skrip menjadi siap setelah diambil bersamaan dengan parsing dokumen.

<script async src = "script.js">

Atribut ini hanya tersedia untuk file skrip eksternal. Bila naskah eksternal memiliki atribut ini, file tersebut dapat diunduh saat dokumen HTML masih parsing. Setelah diunduh, parsing dijeda agar skrip dijalankan. Async mendownload file selama parsing HTML dan akan memberhentikan sementara saat parsing HTML dan menjalankannya saat selesai mendownload.

Atribut defer<script defer>

Teknik defer akan mendownload file selama parsing HTML dan hanya akan menjalankannya setelah parsing selesai. Penangguhan skrip juga dijamin untuk dijalankan sesuai urutan dokumen tersebut muncul dalam dokumen. Atribut defer memberitahu browser untuk hanya menjalankan file script setelah dokumen HTML telah sepenuhnya diurai.

<script defer src = "script.js">

Seperti skrip asinkron yang dimuat, file tersebut dapat didownload saat dokumen HTML masih parsing. Namun, biarpun file tersebut sudah selesai diunduh jauh sebelum dokumen selesai di-parsing, script tidak dijalankan sampai parsing selesai.

Kapan kita harus menggunakannya dan yang mana?

Biasanya Anda akan menggunakan async jika memungkinkan, lalu defer lalu tanpa atribut. Berikut adalah beberapa aturan umum yang harus diikuti:
  • Jika scriptnya modular dan tidak bergantung pada script apapun maka gunakan async.
  • Jika naskah itu bergantung atau diandalkan oleh naskah lain maka gunakanlah defer.
  • Jika skripnya kecil dan diandalkan oleh skrip asinkron, gunakan skrip inline tanpa atribut yang ditempatkan di atas skrip asinkron.
IE9 dan versi di bawahnya memiliki beberapa bug yang sangat buruk dalam implementasi defer sehingga perintah eksekusi tidak dijamin berhasil. Jika Anda perlu untuk mensupport  IE versi 9 dan kebawah saya sarankan untuk tidak menggunakan defer sama sekali dan sertakan skrip anda tanpa atribut jika perintah eksekusi penting.

Comments

Popular posts from this blog

Tutorial SQL Injection Menggunakan SQLMap

Kali ini kita akan membahas tutorial hacing dengan teknik SQL Injection menggunakan tool SQLMap untuk melakukan hacking atau serangan pada website berbasis data dengan tujuan untuk menemukan kerentanan keamanan pada website tersebut. SQL Injection adalah teknik injeksi code yang digunakan untuk melakukan serangan pada aplikasi web berbasis data di mana pernyataan malicious SQL dimasukkan ke dalam entri untuk di eksekusi (misalnya untuk menampilkan konten database ke penyerang). SQL injection dapat mengeksploitasi kerentanan keamanan pada perangkat lunak aplikasi, misalnya saat user salah melakukan filter inputan untuk pengiriman karakter yang disematkan dalam pernyataan SQL atau inputan user tidak diketik dengan benar dan tanpa diduga dieksekusi. SQL Injection lebih dikenal sebagai vektor serangan untuk sebuah situs web namun juga dapat digunakan untuk menyerang semua jenis database SQL. Apa itu SQLMap SQLMap adalah salah satu tool otomatis untuk melakukan SQL Injection yang

Penjumlahan dan pengurangan tanggal di PHP

Penjumlahan (tambah) dan pengurangan (kurang) tanggal di PHP sering  kita jumpai di beberapa kasus pembuatan sistem seperti pembuatan fitur peminjaman, perizinan, pemesanan dan lain-lain. Kali ini kita akan membahas bagaimana  suatu tanggal dapat di tambah atau di kurangi dengan hari, bulan dan tahun. Ok langsung saja kita bahas materinya!

Cara membuat Hak Akses (Privileges) pada user SQL Server (Grant dan Revoke)

Pada tutorial kali ini kita akan belajar bagaimana cara membuat atau memberi grant atau revoke hak akses (Privileges) pada user di SQL Server menggunakan syntax Transact SQL (T-SQL). Anda dapat memberi GRANT dan REVOKE hak akses pada berbagai objek database di SQL Server. Kali ini kita akan melihat bagaimana memberi dan menghapus hak akses pada tabel di SQL Server. Memberikan permissions dan menghapus permissions tidak terlalu sulit dilakukan di dalam SQL Server, hanya butuh beberapa waktu untuk menentukan permissions apa yang harus diterapkan. Sebelumnya anda harus membuat user dahulu pada SQL Server, setelah itu baru kita bisa memberi Hak Akses. Berikutnya pastikan anda sudah membuat atau menjalankan script dibawah ini. [USE [nama_database] GO CREATE USER [nama_user] FOR LOGIN [nama_user]] Grant Hak Akses (Privileges) pada  tabel Anda dapat memberi (Grant) berbagai hak akses ke tabel pada user. Hak akses ini bisa berupa kombinasi SELECT, INSERT, UPDATE, DELETE, REFERENCES