Bagaimana Cara Meletakkan tag script yang benar - Halo sobat Blog Download Source Code Terlengkap Gratis, Pada kesempatan kali ini, saya akan membahas artikel tentang Bagaimana Cara Meletakkan tag script yang benar Artikel javascript, Artikel Web, Semoga artikel yang saya buat bermanfaat. Selamat membaca!.

Judul : Bagaimana Cara Meletakkan tag script yang benar
link : Bagaimana Cara Meletakkan tag script yang benar

Bagaimana Cara Meletakkan tag script yang benar

Assalamualaikum teman2 syntax blog, kali ini admin akan membahas bagaimana caranya meletekkan tag <script> yang benar di html, loh kenapa harus ada aturannya ? iya kalau tidak berarti anda belum developer modern yang hanya ketak ketik dan tidak tau performa sebuah aplikasi.

ok kita pelajari dulu bagaimana cara kerja browser nge-load sebuah website.

Browser load website

pernakah anda mengetahui bagaimana cara browser membuka sebuah website ? seperti ini langkah2nya.

Mencari Html page (contoh index.html)
Kemudian Di parsing menjadi HTML
Hasil Parsing hanya merender Html di page tadi, belum termasuk mengambil external file, contoh tag yang mengambil external file adalah tag <script>
download external file
eksekusi external file
kemudian menjadi sebuah HTML page yang sempurna

langkah yang ke 4 menyebabkan pengalaman pengguna yang buruk. Situs web pada dasarnya berhenti memuat sampai anda men-download semua script.

Mengapa hal ini bisa terjadi ?

Setiap script dapat menyisipkan HTML sendiri melalui document.write() atau DOM Manipulations. ini berarti bahwa parser harus menunggu sampai script telah download. setelah semua ke download maka script bisa dimasukkan HTML sendiri dalam dokumen.

Namun sebagai developer javascript tidak lagi memanipulasi DOM pada saat halaman masih loading.

nah sebaliknya mereka pasti menunggu sampai semua DOM ke load di sebuah halaman, dengan contoh script di bawah ini.

javascriptnya

karena browser anda tidak tahu my-script.js tidak akan memodifikasi dokumen sampai semua ke download dan di eksekusi, parser berhenti parsing.

Rekomendasi Kuno

coba letakkan <script> setelah tag <body> karena hal ini memastikan parser tidak diblokir sampai akhir.

permasalahaannya : browser tidak bisa mulai men-download script sampai seluruh document ter parsing.

Rekomendasi Modern

sekarang browser sudah mendukung attribute async dan defer pada tag <script> nah sekarang kita jadi di permudah dengan adanya 2 attribute tadi, dengan attribute ini akan memberitahu browser itu aman untuk melanjutkan parsing sementara script sedang di download

async

Script dengan atribut async dieksekusi asynchronously. Ini berarti script ini dijalankan secepat itu download, tanpa menghalangi browser sementara itu.

Ini berarti bahwa hal itu mungkin script-2 didownload & dijalankan sebelum skrip 1.

Menurut http://caniuse.com/#feat=script-async, 90% dari semua browser mendukung ini.

defer

script dengan attribute defer dijalankan dalam berurutan (yaitu pertama script 1, kemudian script 2). ini juga tidak menghalangi browser

Tidak seperti script async, menunda skrip hanya dilaksanakan setelah seluruh dokumen telah dimuat.

Menurut http://caniuse.com/#feat=script-defer, 90% dari semua browser mendukung ini. dukungan 92% itu setidaknya sebagian.

Kesimpulan

Saat ini state-of-the-art adalah penempatan script di tag <head> dan menggunakan attribute async atau defer . hal ini memungkinkan script anda untuk di download secepat mungkin tanpa menghalangi browser anda (atau biasa di sebut blocking code).

Hal yang baik adalah bahwa website Anda masih harus memuat dengan benar di 20% dari browser yang tidak mendukung atribut ini, sementara mempercepat lainnya 80%.

Wassalamualaikum wr.wb

sumber : http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup

Demikianlah Artikel Bagaimana Cara Meletakkan tag script yang benar

Sekianlah artikel Bagaimana Cara Meletakkan tag script yang benar kali ini, mudah-mudahan bisa memberikan manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel berikutnya.

Anda sekarang membaca artikel Bagaimana Cara Meletakkan tag script yang benar dengan alamat link https://lapak-code.blogspot.com/2016/09/bagaimana-cara-meletakkan-tag-script.html