Laksanakan pelaksanaan JavaScript berprestasi tinggi dan memuatkan

Pelayar menggunakan satu proses semasa memproses pemaparan halaman HTML dan pelaksanaan skrip JavaScript, jadi apabila penyemak imbas menemui teg semasa membuat HTML, ia akan melaksanakan kod dalam teg terlebih dahulu (jika atribut src digunakan Fail pautan luar yang dimuatkan akan dimuat turun dahulu dan kemudian dilaksanakan). Semasa proses ini, pemaparan halaman dan interaksi akan disekat.

...Walaupun akan ada penyekatan, masih terdapat beberapa cara untuk mengurangkan kesan JavaScript pada prestasi.

1. Lokasi tag skrip

Apabila muncul dalam , seperti:

<head>
  <script type="text/javascript" src="js1.js"></script>
  <script type="text/javascript" src="js2.js"></script>
  <script type="text/javascript" src="js3.js"></script>
</head>

Salin selepas log masuk

Apabila berbilang fail js dimuatkan, penyemak imbas akan mula-mula memuat turun dan melaksanakan kod js, menyekat pemaparan halaman dan menghasilkan halaman skrin putih (penyemak imbas tidak akan memaparkan sebarang kandungan pada halaman sehingga ia menghuraikan tag) ), tiada cara untuk pratonton atau berinteraksi, yang merupakan pengalaman pengguna yang sangat buruk.

Nota:

Pelayar moden menyokong muat turun selari sumber Apabila memuat turun sumber luaran sahaja, tidak akan menyekat teg
Memuat turun sumber JavaScript adalah tidak segerak, tetapi melaksanakan kod JavaScript masih segerak, yang juga akan menyebabkan penyekatan.
Oleh itu, meletakkan di bahagian bawah teg untuk memastikan pemaparan halaman selesai sebelum melaksanakan skrip adalah kaedah pengoptimuman JavaScript yang agak biasa.

2. Gabungkan berbilang tag skrip

Apabila penyemak imbas menghuraikan HTML dan menemui , akan berlaku kelewatan tertentu disebabkan oleh pelaksanaan skrip Untuk pautan luaran dengan atribut src, akan menjadi lebih teruk lebih banyak overhed prestasi. , Meminimumkan kelewatan ini juga merupakan kaedah pengoptimuman Berbilang fail js boleh digabungkan untuk mengurangkan bilangan permintaan HTTP, mengurangkan bilangan jabat tangan tiga hala dan penghantaran pengepala HTTP yang berlebihan, mengurangkan masa tindak balas dan meningkatkan pengalaman pengguna. Terdapat banyak penyelesaian dan alat untuk menggabungkan js di Internet, yang tidak akan diterangkan di sini.

3. Gunakan kaedah bukan sekatan untuk memuat turun JavaScript

Gunakan atribut tangguh dan tak segerak bagi teg skrip
Gunakan teg skrip yang dibuat secara dinamik untuk memuat turun dan melaksanakan kod JavaScript
Gunakan objek XHR untuk memuat turun kod JavaScript dan menyuntiknya ke dalam halaman

3.1. Gunakan atribut tangguh dan tak segerak bagi teg skrip

Atribut async dan defer kedua-duanya digunakan untuk memuatkan fail js secara tidak segerak, dan tidak akan menyekat proses penyemak imbas lain semasa proses Bezanya ialah async dilaksanakan secara automatik selepas dimuatkan, manakala penangguhan perlu menunggu sehingga halaman dimuatkan sebelum. melaksanakan. Perlu diingat bahawa satu perkara ialah kedua-dua atribut ini mesti berada dalam teg Di bawah ialah demo:

<!DOCTYPE html>
<html>
<head>
  <title>defer example</title>
</head>
<body>
  <script type="text/javascript" src="defer.js" defer></script>
  <script>
    alert("script");
  </script>
  <script>
    window.onload= function(){
      alert("load");
    }
  </script>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
</body>
</html>

Salin selepas log masuk

//Fail defer.js hanya mempunyai satu baris kod: alert("defer");
Contoh async juga mempunyai struktur halaman yang sama Saya tidak akan menunjukkan contoh di sini. Anda boleh klik pada pautan di bawah.
Klik di sini untuk pautan untuk menangguhkan contoh!
Klik di sini untuk pautan ke contoh async!

Walaupun struktur halaman adalah sama, perbezaannya ialah

Buka defer.html dan anda akan melihat perkara berikut: Kotak makluman "skrip" muncul => timbul
Buka async.html dan anda akan melihat perkara berikut: Kotak amaran untuk "skrip" muncul => Kotak amaran untuk "async" muncul =>

3.2. Gunakan teg skrip yang dibuat secara dinamik untuk memuat turun dan melaksanakan kod JavaScript

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

Salin selepas log masuk

file.js mula memuat turun apabila elemen skrip ditambahkan pada halaman Kelebihan menggunakan kaedah ini ialah muat turun dan pelaksanaan file.js tidak akan menyekat proses lain pada halaman.

Daripada tunjuk cara, adalah jelas bahawa kaedah pemuatan dinamik boleh melihat teks pada halaman sebelum kotak amaran muncul, tetapi kaedah biasa hanya boleh melihat teks pada halaman selepas kotak amaran muncul.

Kami boleh merangkum fungsi pelayar silang yang membaca skrip skrip dan mencipta teg skrip secara dinamik:

function loadScript(url,callback){
  var script = document.createElement("script");
  script.type = "text/javascript";
  //检测客户端类型
  if(script.readyState){//IE
    script.onreadystatechange = function(){
      if(script.readyState==="loaded"||script.readyState==="complete"){
        script.onreadystatechange = null;
        callback();
      }
    }
  }else{//其他浏览器
    script.onload = function(){
      callback();
    }  
  }
  
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

Salin selepas log masuk

Kaedah pemuatan skrip dinamik ini mempunyai keserasian yang baik dan agak mudah Ia adalah penyelesaian tanpa sekatan yang biasa digunakan.

3.3. Gunakan objek XHR untuk memuat turun kod JavaScript dan menyuntiknya ke dalam halaman

Cara lain untuk memuatkan skrip tanpa menyekat ialah menggunakan objek XMLHttpRequest (XHR) untuk mendapatkan skrip dan menyuntiknya ke dalam halaman.
Teknik ini mula-mula akan mencipta objek XHR, kemudian menggunakannya untuk memuat turun fail JavaScript, dan akhirnya menyuntik kod ke dalam halaman melalui elemen dinamik biasa.

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
  if(xhr.readyState===4){
    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
    }
  }
}

Salin selepas log masuk

以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个

Artikel terbaru oleh pengarang