Ringkasan mata pengetahuan tentang meningkatkan kemahiran JavaScript performance_javascript

1. Memuatkan lokasi fail js

Dalam fail HTML, teg boleh ditambahkan pada kawasan Memandangkan sebab satu-utas untuk pelaksanaan JavaScript dan pemaparan UI, jika fail js dimuatkan, ia akan menyekat proses penghuraian halaman berikutnya. Halaman akan menunggu sehingga fail js dimuatkan sepenuhnya dan dijalankan sebelum meneruskan prestasi operasi itu. Kemudian masalah timbul, halaman mungkin kosong atau tersekat. Sebagai pembangun bahagian hadapan, penting bukan sahaja untuk merealisasikan keperluan, tetapi juga untuk menyediakan pengalaman pengguna yang berkualiti tinggi. Kemudian kita perlu menghapuskan penantian pengguna yang membosankan Untuk menyelesaikan masalah ini, berikut adalah dua penyelesaian yang saya fikirkan:

1. Jika fail js tidak mempunyai keperluan khas yang menunjukkan bahawa ia perlu dimuatkan dan disusun sebelum halaman dipaparkan, kemudian pilih untuk meletakkan fail js sebelum teg kandungan yang dibentangkan pada halaman). Fail css masih diletakkan di kawasan Melakukan ini akan membolehkan pengguna melihat halaman reka letak dan bukannya halaman kosong Kemudian beberapa orang akan menunjukkan: Data mesti dimuatkan melalui permintaan js. Pemuatan data boleh diisih Antara muka yang diperlukan dengan segera boleh dilaksanakan terlebih dahulu.

2. Jika fail js ini menyatakan bahawa ia perlu dilaksanakan terlebih dahulu untuk memaparkan kandungan halaman dengan lebih baik, kemudian letakkan animasi pemuatan kecil pada js atau halaman pertama, yang boleh menjadi adegan animasi yang menarik atau comel. Ini juga dapat mengelakkan kebosanan menunggu pengguna dengan lebih baik Mungkin mereka akan lebih berminat dengan animasi pemuatan, yang boleh meningkatkan pengalaman pengguna projek.

Cadangan akhir: Letakkan teg sebanyak mungkin di hadapan teg

2. Menggabungkan fail js
Dalam banyak pembangunan pasukan, kami mungkin meletakkan blok kod dengan fungsi yang berbeza dalam fail js yang berbeza, supaya lebih mudah untuk semua orang bekerjasama untuk menulis kod semasa proses pembangunan Lagipun, kami hanya perlu mencari folder atau fail yang sepadan bukannya dalam satu Cari kaedah dalam dokumen yang sangat panjang. Ini sememangnya akan meningkatkan kecekapan pembangunan pasukan dan memudahkan orang baharu melakukan pembangunan dan penyelenggaraan sekunder selepas menyertainya. Jadi bagaimana pula dengan meletakkan isu ini ke dalam prestasi halaman? Inilah masalahnya, dinyatakan dalam buku: Setiap permintaan HTTP membawa overhed prestasi tambahan, jadi memuat turun satu fail 100 KB akan lebih pantas daripada memuat turun empat fail 25 KB.

Memuat turun satu fail 100KB adalah lebih pantas daripada memuat turun empat fail 25KB, dan terdapat faedah besar dalam membezakan setiap fail semasa proses pembangunan, jadi isu penggabungan akan ditangani selepas pembangunan selesai biasa kepada semua orang, bukan? Terdapat begitu banyak alat bahagian hadapan sekarang, jadi gunakan sahaja pemampatan yang biasa anda gunakan~
Biar saya nyatakan secara ringkas di sini bahawa anda juga boleh menggunakan atribut defer dan async semasa memuatkan fail untuk pemuatan malas dan pemuatan tak segerak Dalam penyemak imbas moden, kebanyakannya sudah menyokong atribut defer yang saya tidak biasa menggunakan ini. tidak tahu jika akan ada sebarang masalah khusus. Rakan-rakan yang berminat boleh google sendiri point ilmu ini, dan saya akan sebutkan secara ringkas di sini.

Kebanyakan rangka kerja hari ini turut menyokong pemuatan malas dan pemuatan atas permintaan.

3. Akses data yang lebih pantas

Untuk penyemak imbas, lebih dalam lokasi pengecam, lebih perlahan ia akan membaca dan menulisnya (begitu juga untuk rantai prototaip). Ini sepatutnya tidak sukar untuk difahami. Analogi yang mudah ialah: semakin jauh kedai runcit dari rumah anda, semakin lama masa yang anda ambil untuk membuat kicap... Nak nakal, kalau anda ambil masa yang lama untuk membuat kicap, sayur-sayuran. akan hangus -.-~

Jika kita perlu menggunakan nilai pembolehubah beberapa kali dalam fungsi semasa, maka kita boleh menggunakan pembolehubah setempat untuk menyimpannya terlebih dahulu

 //修改前
 function showLi(){
   var i = 0;
   for(;i<document.getElementsByTagName("li").length;i++){  //一次访问document
     console.log(i,document.getElementsByTagName("li")[i]); //三次访问document
   };
 };
 //修改后
 function showLi(){
   var li_s = document.getElementsByTagName("li"); //一次访问document
   var i = 0;
   for(;i<li_s.length;i++){
     console.log(i,li_s[i]); //三次访问局部变量li_s
   };
 };

4. Pengoptimuman operasi DOM

 function innerLi_s(){
   var i = 0;
   for(;i<20;i++){
     document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
   };
 };

 function innerLi_s(){
   var content ="";
   var i = 0;
   for(;i<20;i++){
     content += "A"; //这里只对js的变量循环了20次
   };
   document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
 };

5. Kurangkan lukisan semula dan penyusunan semula Dom

Untuk operasi yang serupa dengan kod berikut, dikatakan bahawa kebanyakan penyemak imbas moden telah dioptimumkan (dioptimumkan menjadi 1 versi penyusunan semula):

 //修改前
 var el = document.getElementById("div");
 el.style.borderLeft = "1px"; //1次重排版
 el.style.borderRight = "2px"; //又1次重排版
 el.style.padding = "5px"; //还有1次重排版
 //修改后
 var el = document.getElementById("div");
 el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

//修改前
 var i = 0;
 for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length
   console.log(arr[i]);
 }
 //修改后
 var i = 0;
 var len = arr.length; //获取一次数组arr的length 
 for(;i<len;i++){
   console.log(arr[i]);
 }
 //or
 var i = arr.length;;
 for(;i;i--){
   console.log(arr[i]);
 }

 .odd{color:red}
 .even{color:yellow}

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

 var i = 0;
 var lis = document.getElementsByTagName("li");
 var len = lis.length;
 for(;i<len;i++){
  if(i&1){
   lis[i].className = "even";
  } else{
   lis[i].className = "odd";
  }
 };