Ringkasan mata pengetahuan JavaScript: cara meningkatkan kemahiran performance_javascript

Isu prestasi JavaScript tidak boleh dipandang remeh, yang memerlukan kami pembangun memberi perhatian lebih kepada beberapa butiran semasa menulis program JavaScript Artikel ini memperkenalkan mata pengetahuan pengoptimuman prestasi JavaScript dengan terperinci, yang pastinya merupakan maklumat yang berguna.

Izinkan saya menyatukan sintaks asas javascript:

Sintaks asas javascript

Gunakan kata kunci var untuk menentukan pembolehubah

Sintaks: nama pembolehubah var=nilai pembolehubah

pengecam: ①, terdiri daripada huruf, nombor dan garis bawah. Ia tidak boleh menjadi kata kunci sepenuhnya

Jenis data:

Jenis angka: nombor

Rentetan: rentetan

Jenis Boolean: boolean

Jenis data khas: undefined kosong undefined unassigned

Nilai nol: nol

Fungsi objek jenis rujukan

Kesan jenis data parameter: typeof() mengembalikan rentetan yang sepadan dengan jenis data

Penggunaan dua tanda sama == dan tiga tanda sama ===

==: Nilai perbandingan adalah sama tanpa mengira jenis data

===: Perbandingan kongruen berkaitan dengan nilai berangka dan jenis data

Persekitaran Boolean: tukar secara automatik kepada nilai Boolean apabila menghadapi jika

Persekitaran Boolean dalam rentetan rentetan: kosong ialah palsu, bukan kosong ialah benar

Persekitaran Boolean dalam nombor berangka: 0 adalah palsu, bukan 0 adalah benar

Hubungan antara nombor dan rentetan

① Apabila bertemu, lakukan operasi penyambungan

② Apabila operasi perlu dilakukan, rentetan mesti ditukar kepada nilai berangka

Kaedah penukaran 1, rentetan*1 kepada jenis angka

Kaedah penukaran 2: Tukar Nombor (rentetan) kepada jenis angka

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 dalam menulis kod semasa proses pembangunan, kami hanya perlu mencari folder yang sepadan atau fail. Tidak mencari kaedah dalam fail yang 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~

Saya ingin nyatakan secara ringkas di sini bahawa anda juga boleh menggunakan atribut tangguh dan tak segerak semasa memuatkan fail untuk pemuatan tertunda dan pemuatan tak segerak Dalam penyemak imbas moden, kebanyakannya sudah menyokong atribut penangguhan ini Namun, saya tidak tahu sama ada akan ada 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.

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

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

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

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

Untuk berbilang operasi, tiga kaedah berikut juga boleh mengurangkan bilangan aliran semula dan lukisan semula:

1.Dom disembunyikan dahulu, kemudian dipaparkan selepas operasi 2 (paparan sementara:tiada)

2.document.createDocumentFragment() mencipta pemprosesan serpihan dokumen, menambah pada halaman selepas operasi dan menyusun semula sekali

3.var newDOM = oldDOM.cloneNode(true) mencipta salinan Dom Selepas mengubah suai salinan, oldDOM.parentNode.replaceChild(newDOM,oldDOM) menimpa DOM asal dan menyusunnya semula 2 kali

5: Pengoptimuman gelung

Ini sepatutnya kaedah penulisan yang ramai orang tahu Anda boleh melaluinya (ia masih akan diterangkan dalam bentuk komen kod nanti)~

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

6: Penggunaan binari yang betul

Contohnya: mengambil modulo 2, bit terendah nombor genap ialah 0, bit terendah nombor ganjil ialah 0, hasil operasi bitwise DAN dengan 1 ialah 0, bit terendah nombor ganjil ialah 1, hasilnya operasi bitwise DAN dengan 1 ialah 1.

Kod adalah seperti berikut:

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

Walaupun pelayar moden telah melakukan kerja yang baik, saya rasa ini adalah usaha saya untuk mendapatkan kualiti kod. Dan mungkin tidak memberi perhatian kepada satu atau dua mata tidak akan memberi banyak impak kepada prestasi, tetapi selepas mengoptimumkan daripada berbilang mata, keputusan yang mungkin akan menjadi lonjakan kualitatif~