Rumah > Artikel > hujung hadapan web > Laksanakan pelaksanaan JavaScript berprestasi tinggi dan memuatkan_Pengetahuan asas

Laksanakan pelaksanaan JavaScript berprestasi tinggi dan memuatkan_Pengetahuan asas

WBOYasal: 2016-05-16 15:16:521672semak imbas

Pelayar menggunakan satu proses semasa memproses pemaparan halaman HTML dan pelaksanaan skrip JavaScript, jadi apabila penyemak imbas menemui teg 855348821b2e8f2cc4b633bf98f064df 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 855348821b2e8f2cc4b633bf98f064df muncul dalam 93f0f5c25f18dab9d176bd4f6de5d30e, 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>

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 6c04bd5ca3fcae76e30b72ad730ca86d 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, 855348821b2e8f2cc4b633bf98f064df tidak akan menyekat teg 855348821b2e8f2cc4b633bf98f064df
Memuat turun sumber JavaScript adalah tidak segerak, tetapi melaksanakan kod JavaScript masih segerak, yang juga akan menyebabkan penyekatan.
Oleh itu, meletakkan 855348821b2e8f2cc4b633bf98f064df di bahagian bawah teg 6c04bd5ca3fcae76e30b72ad730ca86d 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 855348821b2e8f2cc4b633bf98f064df, akan berlaku kelewatan tertentu disebabkan oleh pelaksanaan skrip Untuk pautan luaran dengan atribut src, 855348821b2e8f2cc4b633bf98f064df 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 855348821b2e8f2cc4b633bf98f064df 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>

//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);

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);
}

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 855348821b2e8f2cc4b633bf98f064df 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);
    }
  }
}

以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签,内容就是服务器接收到的responseText。

这种方法的优点以及缺点:

优点:下载JavaScript代码可以不立即执行,且兼容性好适合所有主流浏览器。
缺点:JavaScript文件必须与所请求页面处于同一个域,这种情况下JavaScript文件不能从CDN下载,不适合大型的Web应用。

4.一种推荐的无阻塞方案

如果页面有大量的JavaScript代码需要添加,可以先在页面中去外链之前我们封装好的动态读取script脚本的函数loadScript,然后再使用它去加载其他所需脚本,例如:

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
  loadScript("file.js",function(){
    //do something
  });
</script>

这样只需在第一个3f1c4e4b6b16bbbd69b2ee476dc4f83a下载比较精简的loader.js文件时对页面有些许影响,之后的3f1c4e4b6b16bbbd69b2ee476dc4f83a并不会有太多影响。

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Tentukan sama ada penyemak imbas ditutup atau dimuat semula berdasarkan kemahiran JavaScript (sangat tepat)_javascriptArtikel seterusnya：Tentukan sama ada penyemak imbas ditutup atau dimuat semula berdasarkan kemahiran JavaScript (sangat tepat)_javascript

Artikel berkaitan

Lihat lagi