Pelajari kemahiran optimization_javascript memuatkan fail javascript

Dalam bahagian enjin js, kita boleh mengetahui bahawa apabila enjin rendering menghuraikan tag skrip, ia akan memberi kawalan kepada enjin JS Jika skrip memuatkan sumber luaran, ia perlu menunggu sehingga ia dimuat turun sebelum ia boleh dilaksanakan. Jadi, di sini, kita boleh melakukan banyak kerja pengoptimuman mengenainya.

diletakkan di bahagian bawah BADAN

Untuk membolehkan enjin rendering memaparkan pokok DOM seawal mungkin, kita perlu meletakkan skrip di bahagian bawah badan supaya halaman itu boleh melarikan diri dari skrin putih secepat mungkin, iaitu, Acara DOMContentLoaded akan dicetuskan lebih awal Walau bagaimanapun, kerana dalam IOS Safari, Android Walaupun anda meletakkan skrip js di hujung badan dalam pelayar dan paparan web IOS, hasilnya masih sama, jadi operasi tambahan diperlukan di sini untuk mengoptimumkan. js memuatkan fail.

TUNDA BEBAN

Ini ialah atribut skrip yang ditakrifkan dalam HTML4 Ia digunakan untuk menunjukkan bahawa apabila enjin pemaparan menemui skrip, jika skrip merujuk kepada sumber luaran, ia akan digantung dan dimuatkan buat sementara waktu. Enjin rendering terus menghuraikan dokumen HTML berikut Apabila penghuraian selesai, skrip dalam skrip akan dilaksanakan.

<script src="outside.js" defer></script>

Sokongannya ialah <=IE9
Selain itu, perintah pelaksanaannya bergantung sepenuhnya, iaitu:

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

Apabila halaman dihuraikan, ia akan mula melaksanakan fail outside1 dan outside2 mengikut urutan.
Jika anda menggunakan penangguhan di bawah IE9, anda mungkin mendapati bahawa kedua-dua daripadanya tidak dilaksanakan secara berurutan Diperlukan untuk mengendalikan ini, iaitu, menambah tag skrip kosong

di antara kedua-duanya.

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

Pemuatan ASYNC

async ialah atribut skrip yang baru ditakrifkan dalam H5. Ia adalah satu lagi mod pemuatan js.

• Enjin pemaparan menghuraikan fail, jika ia menemui skrip(dengan tak segerak)
• Teruskan menghuraikan fail yang tinggal dan memuatkan sumber luaran skrip secara selari
• Apabila skrip dimuatkan, penyemak imbas berhenti menghuraikan dokumen, memberi kebenaran kepada enjin JS dan menentukan skrip yang dimuatkan.
• Selepas pelaksanaan, skrip penghuraian penyemak imbas akan dipulihkan

Ia boleh dilihat bahawa async juga boleh menyelesaikan masalah menyekat pemuatan. Walau bagaimanapun, async dilaksanakan secara tidak segerak, menyebabkan susunan pelaksanaan fail menjadi tidak konsisten. Iaitu:

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

Pada masa ini, sesiapa yang selesai memuatkan dahulu akan dilaksanakan terlebih dahulu. Oleh itu, fail yang bergantung pada umumnya tidak seharusnya menggunakan async tetapi tangguhkan.
Keserasian penangguhan agak lemah, ia adalah IE9+, tetapi ia biasanya digunakan pada terminal mudah alih, jadi masalah ini tidak wujud.

Skrip tak segerak

Skrip tak segerak ialah prinsip pemuatan asas yang digunakan oleh sesetengah perpustakaan pemuatan tak segerak (seperti memerlukan terus kod:

).

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

Pada masa ini, fail boleh dimuatkan secara tak segerak tanpa menyebabkan sekatan.
Walau bagaimanapun, fail js yang dimuatkan dengan cara ini tidak teratur dan fail bergantung tidak boleh dimuatkan seperti biasa.
Pada masa ini, kita perlu mengoptimumkan fungsi di atas.

var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

Walau bagaimanapun, jika anda menggunakan skrip untuk memuatkan dalam satu langkah, anda perlu menunggu fail css dimuatkan sebelum mula memuatkan, yang tidak dapat memanfaatkan sepenuhnya kelebihan pemuatan serentak penyemak imbas. Menggunakan teks statik untuk memuatkan async atau menangguhkan tidak akan menyebabkan masalah ini.

Apabila menggunakan skrip untuk memuatkan secara tidak segerak, anda hanya boleh menunggu css dimuatkan sebelum memuatkan
Apabila menggunakan pemuatan async statik, css dan js akan dimuatkan serentak

Mengenai cara memilih antara ketiga-tiga ini, ia bergantung terutamanya pada matlamat yang diberikan oleh pemimpin kepada kita , sama ada ia serasi dengan IE8, 9, telefon bimbit, pelayar desktop atau gabungan dua atau dua .
Tetapi untuk senario menggunakan kemahiran tertentu sahaja, anda perlu memberi perhatian kepada beberapa petua semasa menggunakannya.

1. Fail js hendaklah diletakkan di hujung badan
2. Jika menggunakan async, tambah tangguh pada penghujung untuk keserasian ke belakang

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

Biasanya, beban yang kami gunakan adalah beban tangguh kerana kebergantungan yang kuat.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.