Selama bertahun-tahun, Javascript telah memainkan peranan penting dalam pembangunan aplikasi web, tetapi banyak pembangun sering mengabaikan beberapa pengetahuan prestasi Terutama dengan peningkatan berterusan perkakasan komputer, pembangun semakin bimbang tentang pengoptimuman prestasi Javascript kesan yang jelas terhadap kecekapan pelaksanaan halaman web. Tetapi dalam beberapa kes, kod Javascript yang tidak dioptimumkan pasti akan menjejaskan pengalaman pengguna. Oleh itu, walaupun dalam era semasa apabila prestasi perkakasan telah bertambah baik, apabila menulis kod Javascript, jika anda boleh mengikuti spesifikasi Javascript dan memberi perhatian kepada beberapa pengetahuan prestasi, ia akan memberi manfaat yang besar untuk meningkatkan kebolehselenggaraan kod dan mengoptimumkan prestasi .
Berikut ialah beberapa cadangan untuk menulis kod Javascript berprestasi tinggi:
1. Cuba jangan gunakan gelung untuk masuk untuk mengakses tatasusunan Adalah disyorkan untuk menggunakan gelung ke gelung:
.function foo() { var i, b, c=[,,]; for (i in c) { b = c[i]; if(b === "") return b; } } //性能更好 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } }
2. Adalah disyorkan untuk cache objek, terutamanya akses DOM, yang menggunakan sumber:
//c.length没有缓存,每次迭代都要计算一下数组的长度 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } } //性能更好,第一次将数组的长度缓存到变量l中,第二次及后续的循环无需计算数组长度 function foo() { var i, b, c=[,,],l; for (i=,l=c.length;i<l;i++) { b = c[i]; if(b === "") return b; } } //document.getElementById('info')没有缓存,每次都要遍历DOM function foo() { var e; document.getElementById('info').innerHTML="call "; document.getElementById('info').innerHTML="call "; } //性能更好,第二次无需访问DOM function foo() { var e=document.getElementById('info'); e.innerHTML="call "; e.innerHTML="call "; }
3. Adalah disyorkan untuk tidak membuat pertimbangan bersarang terlalu dalam dalam fungsi:
//函数内嵌套判断语句过多 function foo1() { var r={}; r.data={}; r.data.myProp=2; if (r) { if (r.data) { if (r.data.myProp) { //逻辑处理 } else { //逻辑处理 } } } } //性能更好 function foo2() { var r={}; r.data={}; r.data.myProp=2; if (!r) return; if (!r.data) return; if (r.data.myProp) { //逻辑处理 } else { //逻辑处理 } }
4. Elakkan rujukan bulat dan elakkan kebocoran ingatan:
//需要jQuery function foo(e,d) { $(e).on("click", function() { //对d进行逻辑处理 cbk(d); } }); } //打破循环! function foo(e, d) { $(e).on("click", cbk(d)); } function cbk (d) { //逻辑处理 }
5 Adalah disyorkan untuk mengelak daripada mengembalikan pembolehubah yang tidak diisytiharkan dalam fungsi, yang akan mencemarkan pembolehubah luaran:
function foo(a, b) { r = a + b; return r; //r未声明,则创建了一个全局变量 }
6. var mengisytiharkan pembolehubah adalah disyorkan untuk menulisnya dalam berbilang baris
//自己测试结果是foo快,但也有一种观点是foo快 function foo() { var c = ; var sum=; var d = ; var e; } function foo() { var c = ,sum=, d = , e; }
Nota: Sebenarnya, perbezaan dalam masa satu fungsi adalah kecil Di sini kami menggunakan masa terkumpul untuk menggelung beberapa kali untuk perbandingan prestasi Mungkin terdapat perbezaan dalam keputusan ujian konfigurasi atau penyemak imbas PC yang berbeza.
Kandungan di atas ialah N cadangan untuk menulis kod Javascript berprestasi tinggi Saya harap ia akan membantu semua orang.