Inilah yang terjadi ketika browser memuat situs web dengan tag <script> di atasnya: Show
Langkah # 4 menyebabkan pengalaman pengguna yang buruk. Situs web Anda pada dasarnya berhenti memuat hingga Anda mengunduh semua skrip. Jika ada satu hal yang dibenci pengguna menunggu situs web memuat. Mengapa ini bahkan terjadi?Setiap skrip dapat menyisipkan HTML sendiri melalui document.write() atau manipulasi DOM lainnya. Ini menyiratkan bahwa parser harus menunggu sampai skrip telah diunduh & dieksekusi sebelum dapat dengan aman mem-parsing sisa dokumen. Lagipula, script bisa telah memasukkan HTML-nya sendiri ke dalam dokumen. Namun, sebagian besar pengembang JavaScript tidak lagi memanipulasi DOM saat dokumen dimuat. Sebagai gantinya, mereka menunggu hingga dokumen dimuat sebelum memodifikasinya. Sebagai contoh: <!-- index.html --> <html> <head> <title>My Page</title> <script type="text/javascript" src="my-script.js"></script> </head> <body> <div id="user-greeting">Welcome back, user</div> </body> </html>Javascript: // my-script.js document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, i.e. when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart"; });Karena browser Anda tidak tahu my-script.js tidak akan mengubah dokumen hingga dokumen tersebut diunduh & dieksekusi, parser berhenti mengurai. Rekomendasi kunoPendekatan lama untuk memecahkan masalah ini adalah dengan meletakkan tag <script> di bagian bawah <body> Anda, karena ini memastikan parser tidak diblokir sampai akhir. Pendekatan ini memiliki masalah sendiri: browser tidak dapat mulai mengunduh skrip hingga seluruh dokumen diuraikan. Untuk situs web yang lebih besar dengan skrip & stylesheet besar, dapat mengunduh skrip sesegera mungkin sangat penting untuk kinerja. Jika situs web Anda tidak dimuat dalam 2 detik, orang akan pergi ke situs web lain. Dalam solusi optimal, browser akan mulai mengunduh skrip Anda sesegera mungkin, sementara pada saat yang sama mem-parsing sisa dokumen Anda. Pendekatan modernSaat ini, browser mendukung atribut async dan defer pada skrip. Atribut ini memberi tahu browser bahwa aman untuk melanjutkan penguraian saat skrip sedang diunduh. async<script type="text/javascript" src="path/to/script1.js" async></script> <script type="text/javascript" src="path/to/script2.js" async></script>Skrip dengan atribut async dijalankan secara tidak sinkron. Ini berarti skrip dieksekusi segera setelah diunduh, tanpa memblokir browser sementara itu. Menurut http://caniuse.com/#feat=script-async , 94,57% dari semua browser mendukung ini. menunda<script type="text/javascript" src="path/to/script1.js" defer></script> <script type="text/javascript" src="path/to/script2.js" defer></script>Skrip dengan atribut defer dijalankan berurutan (mis. Skrip 1 pertama, lalu skrip 2). Ini juga tidak memblokir browser. Tidak seperti skrip async, skrip penangguhan hanya dieksekusi setelah seluruh dokumen dimuat. Menurut http://caniuse.com/#feat=script-defer , 94.59% dari semua browser mendukung ini. 94,92% mendukungnya setidaknya sebagian. Catatan penting tentang kompatibilitas browser: dalam beberapa keadaan IE <= 9 dapat mengeksekusi skrip yang ditangguhkan rusak. Jika Anda perlu mendukung browser tersebut, baca ini pertama! KesimpulanKeadaan saat ini adalah menempatkan skrip ke dalam tag <head> dan menggunakan atribut async atau defer. Ini memungkinkan skrip Anda diunduh secepatnya tanpa memblokir peramban Anda. Hal yang baik adalah bahwa situs web Anda masih harus memuat dengan benar pada 6% browser yang tidak mendukung atribut ini sementara mempercepat 94% lainnya.
Anda mungkin sudah membaca post mengenai bagaimana untuk mempelajari Bahasa Pemrograman Javascript. Anda bisa mempelajarinya secara interaktif melalui Codeacademy atau Eloquent JavaScript, seperti yang Anda baca pada post sebelumnya. Karena kedua sumber tersebut memakai Bahasa Inggris, saya rasa mungkin ada baiknya jika saya bisa memberikan tutorial mengenai belajar JavaScript dalam Bahasa Indonesia. Javascript termasuk bahasa pemrograman yang sangat populer dan sangat mudah digunakan. Anda hanya memerlukan web browser terkini (Google Chrome, Safari, IE 9, Opera) dan text editor (Notepad++, TextMate). Namun jika Anda menginginkan editor untuk pemrograman JavaScript yang lebih advance dan tentunya mudah digunakan, saya menyarankan untuk menggunakan Microsoft Web Matrix (untuk Windows) atau Aptana IDE (untuk Windows, Linux dan Mac OS X). Meletakkan JavaScript dalam file HTMLAnda akan membutuhkan HTML dalam penulisan kode Javascript pada halaman web. Berikut ini adalah HTML minimal yang Anda butuhkan untuk mengeksekusi kode JavaScript kita. File HTML akan selalu berekstensi .html, Anda dapat membuat file index.html seperti contoh di bawah ini. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script> alert("Hello World!"); </script> </head> <body> </body> </html> Ada cara lain yang lebih baik dalam meletakkan kode JavaScript, yaitu sebelum menutup body tag. Seperti ini. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script> alert("Hello World!"); </script> </body> </html> Penulisan JavaScriptKode JavaScript selalu menempel pada HTML dalam penggunaannya sebagai skrip pada web page. Untuk menggunakannya biasanya ditaruh dalam script tag. Ada dua cara penulisan JavaScript, pertama adalah menulisnya di dalam tag seperti contoh sebelumnya. Namun menulis seperti itu akan tercampur menjadi satu dengan tag HTML atau stylesheet lainnya, serta jika kode tersebut dibutuhkan di beberapa halaman web, maka akan menjadi pekerjaan yang berulang-ulang. Cara kedua, yaitu dengan memasukkan JavaScript pada suatu file dengan ekstensi .js, contohnya pada skrip.js yang diisi dengan hanya kode JavaScript tanpa script tag dan menambahkan parameter src pada script tag. Jangan lupa untuk selalu menutup tagnya. Berikut ini contoh index.html. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script src="skrip.js"></script> </body> </html> Dan ini contoh skrip.js. Dengan memakai cara kedua akan memudahkan kita dalam menulis dan melakukan perubahan pada kode JavaScript kita. Hal ini juga memudahkan jika Anda memiliki banyak script, seperti framework dan plugin-pluginnya. Jika kode JavaScript Anda banyak dan besar ukurannya juga dengan mudah dapat di-minify supaya lebih cepat proses loading halaman webnya. Sekian perkenalan dari saya. Saya harap dengan membaca ini, Anda sudah bisa memulai untuk belajar JavaScript. Nantikan post saya selanjutnya mengenai variable pada JavaScript. Anda dapat subscribe ke RSS atau ke email list untuk mendapatkan update tutorial selanjutnya. Jangan lupa tinggalkan komentar bila ada pertanyaan ataupun saran. Sumber: Tuts+ Premium Course: JavaScript Fundamentals 101 oleh Jeremy McPeak |