Malas memuat JavaScript untuk meningkatkan kecepatan situs

Panduan untuk memuat file JavaScript eksternal secara asinkron - mencakup solusi JavaScript, jQuery, dan HTML5 untuk memuat skrip yang malas dan mempercepat situs web.

Siswa dan Guru, menghemat hingga 60% pada Adobe Creative Cloud.iklan melalui Karbon

Malas memuat JavaScript untuk meningkatkan kecepatan situs

Penggunaan JavaScript sangat umum di web. Mulai dari fungsi situs, pelacakan pengunjung, iklan hingga aset media sosial, kita bisa melihat JavaScript di mana-mana.

JavaScript menurunkan konsumsi sumber daya di server dengan melakukan banyak tugas di sisi klien. Tapi dari perspektif yang berbeda, itu juga memperlambat web.

Bukan hanya file JavaScript yang bertanggung jawab untuk memperlambat situs web, tetapi sejumlah faktor lainnya juga. Yang saya maksudkan di atas adalah bahwa penggunaan JavaScript yang tidak perlu harus dihindari, dan jika digunakan, seharusnya tidak mempengaruhi waktu buka halaman web.

Bagaimana cara Javascript meningkatkan waktu buka halaman?

Peramban web merender laman web dengan membaca markup itu (HTML). Jika markup berisi file JavaScript eksternal, browser berhenti memuat markup dan mulai mengunduh JavaScript eksternal tersebut - ini menyebabkan pemblokiran dalam pembuatan halaman web (dikenal sebagai pemblokiran render atau pemblokiran parser ).

Proses ini terus berulang pada setiap file JavaScript berikutnya di halaman web, dan oleh karena itu, memperlambat halaman ke tingkat yang lebih besar.

Render blok juga menyebabkan pemblokiran Sumber Daya , ketika file JavaScript eksternal memblokir sumber daya lain seperti markup, media, dll. Dari unduhan ke peramban web.

Untuk menghindari pemblokiran tersebut, blok kecil JavaScript harus ditulis sebaris dalam markup, dan blok-blok besar harus disimpan dalam file terpisah yang harus dimuat secara asynchronous.

Pemuatan malas atau Asynchronous JavaScript

Situs web pemuatan cepat selalu baik untuk keduanya: pengguna dan mesin pencari. Dan pemuatan JavaScript asynchronous adalah satu langkah lebih dekat ke web yang lebih cepat. Perhatikan bahwa pemuatan asynchronous dan pemuatan malas memiliki arti yang sama dengan referensi ke JavaScript.

Bagaimana async JavaScript meningkatkan waktu buka situs web?

Asynchronous JavaScript menghindari pemanggilan langsung .jsfile dalam markup. Skrip dimuat oleh fungsi JavaScript dengan secara dinamis membuat elemen <script>, dan menyediakannya srcdan atribut lainnya.

HTML5 asinkron

Umumnya, .jsfile dipanggil dalam markup menggunakan sintaks berikut:

<script src = " http : // example . com / script . js " > </ script>

Cara termudah untuk memanggil skrip kami secara asinkron adalah atribut asinkron HTML5 yang mencegah pemblokiran render dengan file JavaScript eksternal. Jadi, di bawah ini adalah bagaimana kita menulis ulang sintaks di atas dengan asyncatribut:

<script async src = " http : // example . com / script . js " > </ script>

JavaScript untuk memuat .js file async

Atribut async berfungsi dengan baik pada browser modern - didukung oleh Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+. Namun, untuk dukungan browser yang lebih dalam, saya akan merekomendasikan cara lain untuk melakukannya:

<script> var resource = document . createElement ( 'script' );  
  sumber daya . async = "true" ; 
  sumber daya . src = " http : // example . com / script . js " ; var script = document . getElementsByTagName ( 'script' ) [ 0 ]; 
  skrip . parentNode . insertBefore (
    
  sumber daya , skrip ); </ script>

Script di atas berfungsi di setiap browser, sehingga menghindari ketakutan akan masalah ketidakcocokan antar browser.

Berikut ini adalah versi yang lebih baik, lebih rapi, dan efisien dari potongan kode JavaScript asinkron di atas:

jendela . onload = function () { var s = document . createElement ( 'script' ); 
    s . ketik = 'text / javascript' ; 
    s . async = true ; 
    s . src = ' http : // yourdomain . com / skrip . js ' ; var x = dokumen . getElementsByTagName  
       
    ( 'skrip' ) [ 0 ]; 
    x . parentNode . insertBefore ( s , x ); }

Muat banyak file JavaScript secara asinkron

Kedua cuplikan kode di atas untuk memuat JavaScript secara dinamis melibatkan penggunaan blok kode yang sama lagi dan lagi, mengganti nilai srcatribut ke file JS target Anda. Potongan kode di bawah ini akan menghemat banyak baris kode untuk mencapai hal yang sama:

<script type = "text / javascript" > function script ( url ) { var s = document . createElement ( 'script' ); 
    s . ketik = 'text / javascript' ; 
    s . async = true ; 
    s . src = url ; var x = dokumen . getElementsByTagName ( 'kepala' ) [ 0 ]; 
 
      
    
    x . appendChild ( s ); } </ script>

Sekarang, dengan fungsi di atas, Anda hanya perlu menulis satu baris untuk memuat file JavaScript:

<script> skrip ( ' http : // yoursite . com / your - script . js ' ); </ script>

Demikian pula, untuk memuat beberapa file JavaScript, Anda akan menulis:

<script> 
skrip ( ' http : // yoursite . com / your - script . js ' ); 
skrip ( ' http : // yoursite . com / my - script . js ' ); 
skrip ( ' http : // yoursite . com / third - party - script . js ' ); </ script>

Skrip pemuatan malas dengan jQuery

Jika Anda menggunakan pustaka jQuery di situs web Anda, cuplikan ini akan memungkinkan Anda menyelesaikan pemuatan asinkron dari file JS eksternal:

<script> 
$ . ajax ({ 
  url : ' http : // yoursite . com / script . js ' , 
  dataType : 'skrip' , 
  cache : true , // atau dapatkan salinan baru dan baru pada setiap pemuatan halaman 
  sukses : function () { // Callback } }); </ script>

Itu dia. Jangan ragu untuk memposting pemikiran Anda tentang ini dan berbagi metode yang Anda gunakan untuk pemuatan-malas JS.

Template Style No 1 Shop

Senin, 03 Desember 2018