INDEPHEDIA.com - Agar tidak merusak kinerja pemuatan halaman pada web browser, saat memuat JavaScript pada halaman HTML, Anda harus berhati-hati.
Sebab, ketika Anda menambahkan JavaScript ke halaman HTML bisa saja akan mempengaruhi waktu pemuatan.
Di dunia website, JavaScript dianggap sebagai sumber daya pemblokir parser.
Di dunia website, JavaScript dianggap sebagai sumber daya pemblokir parser.
Ini berarti penguraian dokumen HTML itu sendiri bisa diblokir oleh JavaScript saat situs/website/blog dimuat.
Ketika parser mencapai tag <script>, baik itu internal atau eksternal, akan berakibat berhentinya proses rendering halaman.
Script saat dijalankan akan memproses rendering halaman --jika file JavaScript eksternal-- dan kemudian menjalankannya.
Apabila kita memuat beberapa file JavaScript pada halaman, proses ini dapat menjadi masalah.
Apabila kita memuat beberapa file JavaScript pada halaman, proses ini dapat menjadi masalah.
Karena hal itu dapat juga akan mengganggu waktu untuk membuka file JavaScript. Bahkan juga ketika di halaman itu tidak dibutuhkan.
Setiap kali parser HTML menemukan baris <script>, permintaan akan dibuat untuk mengambil skrip, dan skrip dijalankan.
Setiap kali parser HTML menemukan baris <script>, permintaan akan dibuat untuk mengambil skrip, dan skrip dijalankan.
Setelah proses ini selesai, parsing dapat dilanjutkan, dan sisa HTML dapat dianalisis.
Seperti yang dapat Anda bayangkan, operasi ini dapat berdampak besar pada waktu pemuatan halaman.
Ironisnya, hal itu bisa terjadi bila skrip membutuhkan waktu sedikit lebih lama untuk memuat dari yang diharapkan.
Ironisnya, hal itu bisa terjadi bila skrip membutuhkan waktu sedikit lebih lama untuk memuat dari yang diharapkan.
Misalnya jika jaringan internet agak lambat, pengunjung akan cenderung melihat halaman kosong hingga skripnya dimuat dan dieksekusi.
Untungnya, elemen <script> memiliki dua atribut, async dan defer, yang dapat memberi kita kontrol lebih terhadap bagaimana dan kapan file eksternal diambil dan dieksekusi.
Penggunaan normal <script>
Penggunaan normal <script> atau tanpa atribut apa pun file HTML akan diuraikan hingga file JavaScript ditemukan.
Penggunaan normal <script>
Penggunaan normal <script> atau tanpa atribut apa pun file HTML akan diuraikan hingga file JavaScript ditemukan.
Pada saat itu, jika itu eksternal, parsing akan berhenti dan permintaan akan dibuat untuk mengambil file.
Script kemudian akan dieksekusi sebelum parsing dilanjutkan ke bagian berikutnya.
<script>
Jika <script> ditempatkan di antara tag <head>, hal ini akan buruk karena dapat mempengaruhi proses rendering halaman.
<script>
Jika <script> ditempatkan di antara tag <head>, hal ini akan buruk karena dapat mempengaruhi proses rendering halaman.
Solusi yang sangat umum untuk masalah ini adalah meletakkan tag skrip ke bagian bawah halaman, tepat sebelum tag penutup </ body>.
Solusinya, gunakan atribut Async. Sebab, teknik ini adalah yang terbaik, menurut mereka yang sudah ahlinya.
Solusinya, gunakan atribut Async. Sebab, teknik ini adalah yang terbaik, menurut mereka yang sudah ahlinya.
Parser HTML dapat dilanjutkan dan skrip akan dijalankan segera setelah siap atau setelah berhasil dimuat.
<script async>
Atribut ini hanya tersedia untuk file JavaScript yang ditempatkan secara eksternal.
<script async>
Atribut ini hanya tersedia untuk file JavaScript yang ditempatkan secara eksternal.
Ketika JavaScript eksternal memiliki atribut ini, file dapat diunduh saat dokumen HTML masih di-parsing.
Setelah file di situs/website/blog diunduh, parsing dijeda agar skrip dapat dieksekusi.
Solusinya, gunakan atribut Defer. Karena, proses ini akan menyelesaikan unduhan file selama parser HTML dan hanya akan dijalankan setelah parser selesai.
<script defer>
Seperti JavaScript yang dimuat secara Async, file dapat diunduh saat dokumen HTML masih di parser.
Solusinya, gunakan atribut Defer. Karena, proses ini akan menyelesaikan unduhan file selama parser HTML dan hanya akan dijalankan setelah parser selesai.
<script defer>
Seperti JavaScript yang dimuat secara Async, file dapat diunduh saat dokumen HTML masih di parser.
Namun, meskipun file telah diunduh sepenuhnya sebelum dokumen selesai diparser, skrip tidak dijalankan hingga parser selesai.
Pertanyaannya adalah kapan saatnya kita menggunakan Async maupun Defer?
Pertanyaannya adalah kapan saatnya kita menggunakan Async maupun Defer?
Jawabnya, apabila JavaScript bersifat modular dan tidak bergantung pada JavaScript apapun, gunakan Async.
Kemudian, jika JavaScript memanggil JavaScript lain maka gunakan Defer. Demikian fungsi dan kegunaan dari Async maupun Defer. Semoga bermanfaat. (SBB.IN/*)
No comments:
Write commentSiapapun boleh berkomentar, tetapi secara bijaksana dan bertanggung jawab. Biasakan berkomentar dengan nama yang jelas. Berkomentar dengan UNKNOWN atau SPAM akan dihapus. Komentar sepenuhnya menjadi tanggung jawab individu komentator seperti yang diatur dalam UU ITE (Undang-Undang Informasi dan Transaksi Elektronik) maupun perundang-undangan yang berlaku.