Petua untuk meningkatkan prestasi atur cara JavaScript menggunakan tatasusunan parameter petua Function.apply()_javascript

Mari kita bincangkan tentang kemahiran Function.apply() dalam meningkatkan prestasi program.

Mari mulakan dengan fungsi Math.max() boleh diikuti oleh sebarang bilangan parameter, dan akhirnya mengembalikan nilai maksimum antara semua parameter.

Contohnya

alert(Math.max(5,8))  //8 
alert(Math.max(5,7,9,3,1,6))  //9 

Tetapi dalam banyak kes, kita perlu mencari elemen terbesar dalam tatasusunan.

var arr=[5,7,9,1] 
alert(Math.max(arr))  //  这样却是不行的。一定要这样写 
function getMax(arr){ 
  var arrLen=arr.length; 
  for(var i=0,ret=arr[0];i<arrLen;i++){ 
    ret=Math.max(ret,arr[i]);     
  } 
  return ret; 
}  

Menulis seperti ini menyusahkan dan tidak cekap. Jika anda menggunakan apply, lihat pada kod:

function getMax2(arr){ 
  return Math.max.apply(null,arr) 
} 

Dua keping kod mencapai tujuan yang sama, tetapi getMax2 jauh lebih elegan, cekap dan ringkas.

Lihat ujian prestasi:

ujian prestasi getMax

var myArr=new Array() 
function fillRnd(arrLen){ //填入 arrLen个1-10的随机数字到数组 
  for(var i=0,arr=[];i<arrLen;i++){ 
    arr[i]=Math.ceil(Math.random()*10) 
  } 
  return arr 
} 
function getMax(arr){ 
  var arrLen=arr.length; 
  for(var i=0,ret=arr[0];i<arrLen;i++){ 
    ret=Math.max(ret,arr[i]);     
  } 
  return ret; 
} 
function getMax2(arr){ 
  return Math.max.apply(null,arr) 
} 
myArr=fillRnd(20*10000) //生成20万个随机数填到数组 
var t1=new Date() 
var max1=getMax(myArr) 
var t2=new Date() 
var max2=getMax2(myArr) 
var t3=new Date() 
if (max1!==max2) alert("error") 
alert([t3-t2,t2-t1])  //在我机器上 96,464 .不同的机器,结果可能有差异 

Dengan membandingkan 200,000 data, masa getMax2 ialah 96ms dan masa getmax ialah 464. Perbezaan antara keduanya ialah 5 kali ganda

Contoh lain ialah kaedah tolak tatasusunan.

var arr1=[1,3,4]; 
var arr2=[3,4,5];

Jika kita ingin mengembangkan arr2, dan kemudian tambah pada arr1 satu demi satu, akhirnya biarkan arr1=[1,3,4,3,4,5]

arr1.push(arr2) jelas tidak berfungsi. Kerana melakukan ini akan mendapat [1,3,4, [3,4,5] ]

Kami hanya boleh menggunakan gelung untuk menolak satu demi satu (sudah tentu anda juga boleh menggunakan arr1.concat(arr2) tetapi kaedah concat tidak mengubah arr1 itu sendiri)

var arrLen=arr2.length 
for(var i=0;i<arrLen;i++){ 
  arr1.push(arr2[i]) 
}

Memandangkan kami telah Memohon , perkara menjadi sangat mudah

Array.prototype.push.apply(arr1,arr2) 

Lampiran: Cara mengoptimumkan prestasi skrip JavaScript

Dengan pembangunan Internet dan peningkatan kelajuan rangkaian dan kelajuan mesin, semakin banyak tapak web menggunakan teknologi pelanggan yang kaya. Sekarang Ajax adalah kaedah yang paling popular. JavaScript ialah bahasa yang ditafsirkan, jadi sama ada ia boleh mencapai tahap yang sama seperti C/Java mengehadkan perkara yang boleh dilakukan pada klien Untuk meningkatkan prestasinya, saya ingin membina apa yang telah saya lakukan untuk JavaScript sebelum ini bercakap tentang pengalaman saya sendiri, dengan harapan dapat membantu semua orang meningkatkan prestasi skrip JavaScript mereka.

Tahap bahasa

Gelung

Gelung ialah struktur kawalan yang biasa digunakan kebanyakan perkara bergantung padanya untuk melengkapkan Dalam JavaScript, kita boleh menggunakan tiga jenis gelung: for(;;), while(), dan for(in). ini Kecekapan for(in) antara tiga jenis gelung adalah amat lemah kerana ia perlu menanyakan kunci cincang, jadi ia harus digunakan sesedikit mungkin jika boleh. Prestasi gelung for(;;) dan while hendaklah dikatakan pada asasnya setara (apabila digunakan dalam kegunaan harian).

Malah, cara menggunakan kedua-dua gelung ini adalah sangat khusus. Saya mempunyai beberapa situasi yang menarik dalam ujian saya, lihat lampiran. Kesimpulan akhir ialah:

Jika pembolehubah gelung bertambah atau berkurangan, jangan tetapkan nilai kepada pembolehubah gelung sahaja Anda harus menggunakan operator bersarang atau - apabila ia dibaca kali terakhir.

Jika anda ingin membandingkan dengan panjang tatasusunan, anda harus meletakkan atribut panjang tatasusunan ke dalam pembolehubah setempat terlebih dahulu untuk mengurangkan bilangan pertanyaan.

Pembolehubah setempat dan pembolehubah global

Pembolehubah setempat diakses lebih cepat daripada pembolehubah global, kerana pembolehubah global sebenarnya adalah ahli objek global, manakala pembolehubah tempatan diletakkan pada timbunan fungsi.

Jangan gunakan Eval

Menggunakan eval adalah sama dengan memanggil enjin tafsiran sekali lagi untuk menjalankan kandungan pada masa jalan, yang memerlukan banyak masa. Pada masa ini, templat fungsi boleh dilaksanakan menggunakan penutupan yang disokong oleh JavaScript (untuk butiran mengenai penutupan, sila rujuk kandungan yang berkaitan tentang pengaturcaraan berfungsi)

Kurangkan carian objek

Oleh sebab kebolehtafsiran JavaScript, a.b.c.d.e memerlukan sekurang-kurangnya 4 operasi pertanyaan Mula-mula semak a, kemudian tandakan b dalam a, kemudian semak c dalam b, dan seterusnya. Oleh itu, jika ungkapan tersebut muncul berulang kali, ungkapan tersebut hendaklah disimpan sejarang mungkin sebanyak mungkin Anda boleh menggunakan pembolehubah setempat untuk meletakkannya di tempat sementara untuk membuat pertanyaan.

Ini boleh digabungkan dengan gelung, kerana kita selalunya perlu menggelung berdasarkan panjang rentetan dan tatasusunan, dan biasanya panjang ini tidak berubah Contohnya, setiap kali a.length disoal, operasi tambahan diperlukan dan Jika anda menetapkan var len=a.length terlebih dahulu, akan kurang satu pertanyaan.

Gabungan rentetan

Jika anda menambahkan rentetan, sebaiknya gunakan operasi s =anotherStr daripada menggunakan s=s anotherStr.

Jika anda ingin menggabungkan berbilang rentetan, anda harus menggunakan kurang =, seperti

s =a;s =b;s =c; hendaklah ditulis sebagai
s =a b c; dan jika anda mengumpul rentetan, seperti menjalankan = operasi pada rentetan yang sama beberapa kali, sebaiknya gunakan cache. Bagaimana cara menggunakannya? Gunakan tatasusunan JavaScript untuk mengumpul, dan akhirnya gunakan kaedah gabungan untuk menyambung, seperti berikut

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");类型转换

Penukaran jenis ialah kesilapan biasa yang dilakukan oleh semua orang, kerana JavaScript ialah bahasa yang ditaip secara dinamik dan anda tidak boleh menentukan jenis pembolehubah.

1. Tukar nombor kepada rentetan dan gunakan "" 1. Walaupun ia kelihatan agak hodoh, sebenarnya ini adalah yang paling cekap, dari segi prestasi:
("" ) > String() >

Selain itu, tidak seperti masalah dalam carian objek dalam Bahagian 2, Math ialah objek dalaman, jadi Math.floor() sebenarnya tidak mempunyai banyak kaedah pertanyaan dan masa panggilan, dan merupakan yang terpantas.

Gunakan kuantiti langsung

Operasi rentas rentetan

Objek Lanjutan

berkaitan DOM

Sisipkan HTML

Pertanyaan Objek

Buat nod DOM

Kesahihan kod tidak boleh dijamin

Kecekapan operasi rentetan adalah rendah

Pemasa

Lain-lain

Enjin skrip

Pengoptimuman Fail

Ringkasan

同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。

当然，其实这里的一些技巧同样使用在其他的一些解释型语言中，大家也可以进行参考。

由于是以前做过的测试，测试代码已经不全，我补充了一部分如下：

var print; 
if(typeof document != "undefined" ){ 
  print = function(){ 
document.write(arguments[0]); 
} 
}else if(typeof WScript != "undefined" ){ 
  print = function(){ 
    WScript.Echo(arguments[0],arguments[1],arguments[2]); 
  } 
} 
function empty(){ 
} 
function benchmark(f){ 
  var i = 0; 
  var start = (new Date()).getTime(); 
  while(i < pressure){ 
    f(i++); 
  } 
  var end = (new Date()).getTime(); 
  WScript.Echo(end-start); 
} 
/* 
i=0 
start = (new Date()).getTime(); 
while(i < 60000){ 
  c = [i,i,i,i,i,i,i,i,i,i]; 
  i++; 
} 
end = (new Date()).getTime(); 
WScript.Echo(end-start); 
i=0 
start = (new Date()).getTime(); 
while(i < 60000){ 
  c = new Array(i,i,i,i,i,i,i,i,i,i); 
  i++; 
} 
var end = (new Date()).getTime(); 
WScript.Echo(end-start); 
*/ 
function internCast(i){ 
  return "" + i; 
} 
function StringCast(i){ 
  return String(i) 
} 
function newStringCast(i){ 
  return new String(i) 
} 
function toStringCast(i){ 
  return i.toString(); 
} 
function ParseInt(){ 
  return parseInt(j); 
} 
function MathFloor(){ 
  return Math.floor(j); 
} 
function Floor(){ 
  return floor(j); 
} 
var pressure = 50000; 
var a = ""; 
var floor = Math.floor; 
j = 123.123; 
print("-------------\nString Conversion Test"); 
print("The empty:", benchmark(empty)); 
print("intern:", benchmark(internCast)); 
print("String:"); 
benchmark(StringCast); 
print("new String:"); 
benchmark(newStringCast); 
print("toString:"); 
benchmark(toStringCast); 
print("-------------\nFloat to Int Conversion Test"); 
print("parseInt"); 
benchmark(ParseInt); 
print("Math.floor"); 
benchmark(MathFloor); 
print("floor") 
benchmark(Floor); 
function newObject(){ 
  return new Object(); 
} 
function internObject(){ 
  return {}; 
} 
print("------------\nliteral Test"); 
print("runtime new object", benchmark(newObject)); 
print("literal object", benchmark(internObject));  

附录2

代码1：

for(var i=0;i<100;i++){ 
    arr[i]=0; 
  }

代码2：

 var i = 0; 
  while(i < 100){ 
    arr[i++]=0; 
  } 

代码3：

 var i = 0; 
  while(i < 100){ 
    arr[i]=0; 
    i++; 
  }

在firefox下测试这两段代码，结果是代码2优于代码1和3，而代码1一般优于代码3，有时会被代码3超过；而在IE 6.0下，测试压力较大的时候（如测试10000次以上）代码2和3则有时候优于代码1，有时候就会远远落后代码1，而在测试压力较小（如5000次），则代码2>代码3>代码1。

代码4：

var i = 0; 
  var a; 
  while(i < 100){ 
    a = 0; 
    i++; 
  } 

代码5：

 var a; 
  for(var i=0;i<100;i++){ 
    a = 0; 
  } 

上面两段代码在Firefox和IE下测试结果都是性能接近的。

代码6：

  var a; 
  var i=0; 
  while(i<100){ 
    a=i; 
    i++; 
  } 

代码7：

 var a; 
  var i=0; 
  while(i<100){ 
    a=i++; 
  } 

代码8：

 var a; 
  for(var i=0;i<100;i++){ 
    a = i; 
  } 

代码9：

 var a; 
  for(var i=0;i<100;){ 
    a = i++; 
  } 

这四段代码在Firefox下6和8的性能接近，7和9的性能接近，而6, 8 < 7, 9；

最后我们来看一下空循环

代码10：

for(var i=0;i<100;i++){  } 

代码11：

  var i; 
  while(i<100){    i++;  } 

最后的测试出现了神奇的结果，Firefox下代码10所花的时间与代码11所花的大约是24:1。所以它不具备参考价值，于是我没有放在一开始给大家看。