adalah operator + kurang berkinerja dibandingkan StringBuffer.append ()

Di tim saya, kami biasanya melakukan penggabungan string seperti ini:

var url = // some dynamically generated URL
var sb = new StringBuffer();
sb.append("<a href='").append(url).append("'>click here</a>");

Jelas berikut ini jauh lebih mudah dibaca:

var url = // some dynamically generated URL
var sb = "<a href='" + url + "'>click here</a>";

Tetapi para ahli JS mengklaim bahwa +operator tersebut kurang berkinerja dibandingkan StringBuffer.append(). Apakah ini benar?

Internet Explorer adalah satu-satunya browser yang benar-benar menderita seperti ini di dunia saat ini. (Versi 5, 6, dan 7 adalah dog slow. 8 tidak menunjukkan degradasi yang sama.) Terlebih lagi, IE semakin lambat dan semakin lambat semakin panjang string Anda.

Jika Anda memiliki string panjang untuk digabungkan maka pasti gunakan teknik array.join. (Atau beberapa pembungkus StringBuffer di sekitar ini, agar terbaca.) Tetapi jika string Anda pendek, jangan repot-repot.

Teladan Anda tidak bagus karena sangat kecil kemungkinan kinerjanya akan berbeda secara signifikan. Dalam contoh Anda, keterbacaan harus mengalahkan kinerja karena perolehan kinerja satu vs yang lain dapat diabaikan. Manfaat dari sebuah array (StringBuffer) hanya terlihat ketika Anda melakukan banyak concatentations. Meskipun demikian, jarak tempuh Anda bisa sangat bergantung pada browser Anda.

Berikut adalah analisis kinerja terperinci yang menunjukkan kinerja menggunakan semua metode penggabungan JavaScript yang berbeda di banyak browser yang berbeda; Kinerja String dan Analisis

Selengkapnya:
Ajaxian >> Performa String di IE: Array.join vs + = lanjutan

Ya itu benar tetapi Anda tidak perlu peduli. Pilih salah satu yang lebih mudah dibaca. Jika Anda harus mengukur aplikasi Anda, maka fokuslah pada kemacetan.

Saya kira penggabungan string tidak akan menjadi hambatan Anda.

Setuju dengan Michael Haren .

Juga pertimbangkan penggunaan array dan gabung jika kinerja memang menjadi masalah.

var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));

Coba ini:

var s = ["<a href='", url, "'>click here</a>"].join("");

Seperti yang sudah dicatat oleh beberapa pengguna: Ini tidak relevan untuk string kecil.

Dan mesin JavaScript baru di Firefox, Safari atau Google Chrome mengoptimalkannya

"<a href='" + url + "'>click here</a>";

secepat

["<a href='", url, "'>click here</a>"].join("");

JavaScript tidak memiliki objek StringBuffer asli, jadi saya berasumsi ini dari perpustakaan yang Anda gunakan, atau fitur dari lingkungan host yang tidak biasa (yaitu bukan browser).

Saya ragu perpustakaan (ditulis dalam JS) akan menghasilkan sesuatu yang lebih cepat, meskipun objek StringBuffer asli mungkin. Jawaban pasti dapat ditemukan dengan profiler (jika Anda menjalankan di browser, Firebug akan memberi Anda profiler untuk mesin JS yang ditemukan di Firefox).

Dalam kata-kata Knuth, "optimasi prematur adalah akar dari segala kejahatan!" Perbedaan kecil dengan cara apa pun kemungkinan besar tidak akan banyak berpengaruh pada akhirnya; Saya akan memilih yang lebih mudah dibaca.

Metode yang lebih mudah dibaca menghemat waktu yang terlihat saat melihat kode, sedangkan metode "lebih cepat" hanya membuang waktu yang tidak terlihat dan kemungkinan dapat diabaikan saat orang menjelajahi halaman.

Saya tahu posting ini payah, tetapi saya tidak sengaja memposting sesuatu yang sama sekali berbeda dengan pemikiran ini adalah utas yang berbeda dan saya tidak tahu cara menghapus posting. Salahku...

Sangat mudah untuk menyiapkan tolok ukur cepat dan memeriksa variasi kinerja Javascript menggunakan jspref.com . Yang mungkin tidak ada saat pertanyaan ini diajukan. Tetapi bagi orang-orang yang tersandung pada pertanyaan ini, mereka harus melihat-lihat situs tersebut.

Saya melakukan tes cepat dari berbagai metode penggabungan di http://jsperf.com/string-concat-methods-test .

Saya suka menggunakan gaya fungsional, seperti:

function href(url,txt) {
  return "<a href='" +url+ "'>" +txt+ "</a>"
}

function li(txt) {
  return "<li>" +txt+ "</li>"
}

function ul(arr) {
  return "<ul>" + arr.map(li).join("") + "</ul>"
}

document.write(
  ul(
    [
      href("http://url1","link1"),
      href("http://url2","link2"),
      href("http://url3","link3")
    ]
  )
)

Gaya ini terlihat mudah dibaca dan transparan. Ini mengarah pada pembuatan utilitas yang mengurangi pengulangan dalam kode.

Ini juga cenderung menggunakan string perantara secara otomatis.

Sejauh yang saya tahu, setiap penggabungan menyiratkan realokasi memori. Jadi masalahnya bukan operator yang biasa melakukannya, solusinya adalah mengurangi jumlah penggabungan. Misalnya melakukan penggabungan di luar struktur iterasi bila Anda bisa.

Ya, menurut tolok ukur biasa. Misalnya: http://mckoss.com/jscript/SpeedTrial.htm .

Tetapi untuk string kecil, ini tidak relevan. Anda hanya akan peduli dengan penampilan dengan string yang sangat besar. Terlebih lagi, di sebagian besar skrip JS, leher botol jarang ada pada manipulasi string karena jumlahnya tidak cukup.

Anda sebaiknya memperhatikan manipulasi DOM.