Ringkasan mata pengetahuan tentang meningkatkan kemahiran JavaScript performance

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

Salin selepas log masuk

4. Pengoptimuman operasi DOM

Seperti yang kita semua tahu, operasi DOM menggunakan prestasi jauh lebih banyak daripada pelaksanaan JavaScript Walaupun kami tidak dapat mengelak daripada beroperasi pada DOM, kami boleh cuba mengurangkan penggunaan prestasi operasi ini sebanyak mungkin.

Mari jelaskan perkara ini melalui kod:

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

Salin selepas log masuk

Tulis semula kaedah di atas:

 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的值，一次写入值
 };

Salin selepas log masuk

5. Kurangkan lukisan semula dan penyusunan semula Dom

Perubahan dalam reka letak elemen, penambahan kandungan, pemadaman atau perubahan saiz tetingkap penyemak imbas akan mengakibatkan pengaliran semula, manakala perubahan dalam warna fon atau warna latar belakang akan mengakibatkan lukisan semula.

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次重排版

Salin selepas log masuk

针对多重操作，以下三种方法也可以减少重排版和重绘的次数：

1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)

2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排

3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排

六、循环的优化

这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~

//修改前
 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]);
 }

Salin selepas log masuk

七、合理利用二进制

如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。

代码如下：

 .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>

Salin selepas log masuk

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

Salin selepas log masuk

虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了

JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。