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.
IPHEDIA.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 situs web/website/blog, JavaScript dianggap sebagai sumber daya pemblokir parser.
Di dunia situs web/website/blog, JavaScript dianggap sebagai sumber daya pemblokir parser.
Ini berarti penguraian dokumen HTML itu sendiri bisa diblokir oleh JavaScript di website Anda.
Ketika parser mencapai tag <script>, baik itu internal atau eksternal, akan berakibat berhentinya proses rendering halaman.
Proses rendering halaman itu terhenti untuk mengambil -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 kembali, dan sisa HTML dapat dianalisis.
Seperti yang dapat Anda bayangkan, operasi ini dapat berdampak besar pada waktu pemuatan halaman.
Ironisnya, bila skrip membutuhkan waktu sedikit lebih lama untuk memuat dari yang diharapkan.
Ironisnya, 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.
<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 menurut ahlinya adalah yang terbaik.
Solusinya, gunakan atribut Async. Sebab, teknik ini menurut ahlinya adalah yang terbaik.
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 diunduh, parsing dijeda agar skrip yang ada di dalam elemen website 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 diparsel, skrip tidak dijalankan hingga parser selesai.
Pertanyaannya, kapan kita menggunakan async atau defer? Jawabnya, apabila JavaScript bersifat modular dan tidak bergantung pada JavaScript apa pun, gunakan async.
Pertanyaannya, kapan kita menggunakan async atau defer? Jawabnya, apabila JavaScript bersifat modular dan tidak bergantung pada JavaScript apa pun, gunakan async.
Kemudian, jika JavaScript satu memanggil JavaScript lain maka gunakan script defer. (as/ip)
No comments:
Write commentSiapapun boleh berkomentar, tetapi dengan cara yang bijaksana dan bertanggung jawab. Berkomentarlah dengan nama yang jelas dan bukan spam agar tidak 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.