Mengapa penggabungan string lebih cepat daripada gabungan array?

Hari ini, saya membaca utas ini tentang kecepatan penggabungan string.

Anehnya, rangkaian string adalah pemenangnya:

http://jsben.ch/#/OJ3vo

Hasilnya berlawanan dengan apa yang saya pikirkan. Selain itu, ada banyak artikel tentang ini yang menjelaskan sebaliknya seperti ini .

Saya dapat menebak bahwa browser dioptimalkan untuk merangkai concatpada versi terbaru, tetapi bagaimana mereka melakukannya? Bisakah kita mengatakan bahwa lebih baik digunakan +saat menggabungkan string?

Memperbarui

Jadi, di browser modern penggabungan string dioptimalkan sehingga menggunakan +tanda lebih cepat daripada menggunakan joinsaat Anda ingin menggabungkan string.

Tapi @Arthur menunjukkan itu joinlebih cepat jika Anda benar-benar ingin menggabungkan string dengan pemisah.

Pembaruan -
Chrome 2020 : Array joinhampir seperti 2 times fasterString concat + Lihat: https://stackoverflow.com/a/54970240/984471

Sebagai catatan:

• Array joinlebih baik jika Anda punyalarge strings
• Jika kita perlu menghasilkan several small stringsdalam keluaran akhir, lebih baik menggunakan string concat +, karena jika tidak menggunakan Array akan membutuhkan beberapa konversi Array ke String pada akhirnya yang merupakan kelebihan kinerja.

Optimasi string browser telah mengubah gambar penggabungan string.

Firefox adalah browser pertama yang mengoptimalkan penggabungan string. Dimulai dengan versi 1.0, teknik array sebenarnya lebih lambat daripada menggunakan operator plus di semua kasus. Browser lain juga telah mengoptimalkan penggabungan string, jadi Safari, Opera, Chrome, dan Internet Explorer 8 juga menunjukkan kinerja yang lebih baik menggunakan operator plus. Internet Explorer sebelum versi 8 tidak memiliki pengoptimalan seperti itu, sehingga teknik array selalu lebih cepat daripada operator plus.

- Menulis JavaScript yang Efisien: Bab 7 - Situs Web yang Lebih Cepat

Mesin javascript V8 (digunakan di Google Chrome) menggunakan kode ini untuk melakukan penggabungan string:

// ECMA-262, section 15.5.4.6
function StringConcat() {
  if (IS_NULL_OR_UNDEFINED(this) && !IS_UNDETECTABLE(this)) {
    throw MakeTypeError("called_on_null_or_undefined", ["String.prototype.concat"]);
  }
  var len = %_ArgumentsLength();
  var this_as_string = TO_STRING_INLINE(this);
  if (len === 1) {
    return this_as_string + %_Arguments(0);
  }
  var parts = new InternalArray(len + 1);
  parts[0] = this_as_string;
  for (var i = 0; i < len; i++) {
    var part = %_Arguments(i);
    parts[i + 1] = TO_STRING_INLINE(part);
  }
  return %StringBuilderConcat(parts, len + 1, "");
}

Jadi, secara internal mereka mengoptimalkannya dengan membuat InternalArray ( partsvariabel), yang kemudian diisi. Fungsi StringBuilderConcat dipanggil dengan bagian ini. Ini cepat karena fungsi StringBuilderConcat adalah kode C ++ yang sangat dioptimalkan. Terlalu panjang untuk mengutip di sini, tapi cari di file runtime.cc untuk RUNTIME_FUNCTION(MaybeObject*, Runtime_StringBuilderConcat)melihat kodenya.

Firefox cepat karena menggunakan sesuatu yang disebut Ropes ( Ropes: an Alternative to Strings ). Tali pada dasarnya hanyalah DAG, di mana setiap Node adalah string.

Jadi misalnya, jika Anda mau a = 'abc'.concat('def'), objek yang baru dibuat akan terlihat seperti ini. Tentu saja ini tidak persis seperti yang terlihat di memori, karena Anda masih perlu memiliki bidang untuk jenis string, panjang dan mungkin lainnya.

a = {
 nodeA: 'abc',
 nodeB: 'def'
}

Dan b = a.concat('123')

b = {
  nodeA: a, /* {
             nodeA: 'abc',
             nodeB: 'def'
          } */
  nodeB: '123'
}           

Jadi dalam kasus yang paling sederhana, VM hampir tidak melakukan pekerjaan apa pun. Satu-satunya masalah adalah ini memperlambat operasi lain pada string yang dihasilkan sedikit. Juga ini tentu saja mengurangi overhead memori.

Di sisi lain ['abc', 'def'].join('')biasanya hanya akan mengalokasikan memori untuk meletakkan string baru dalam memori. (Mungkin ini harus dioptimalkan)

Saya tahu ini utas lama, tetapi pengujian Anda salah. Anda melakukan output += myarray[i];sementara itu seharusnya lebih seperti output += "" + myarray[i];karena Anda lupa, bahwa Anda harus merekatkan barang menjadi satu dengan sesuatu. Kode concat harus seperti ini:

var output = myarray[0];
for (var i = 1, len = myarray.length; i<len; i++){
    output += "" + myarray[i];
}

Dengan begitu, Anda melakukan dua operasi, bukan satu karena elemen merekatkan bersama.

Array.join() lebih cepat.

Untuk jumlah data yang besar, penggabungan lebih cepat, jadi pertanyaannya salah.

let result = "";
let startTime = new Date().getTime();
for (let i = 0; i < 2000000; i++) {
    result += "x";
}
console.log("concatenation time: " + (new Date().getTime() - startTime));

startTime = new Date().getTime();
let array = new Array(2000000);
for (let i = 0; i < 2000000; i++) {
    array[i] = "x";
}
result = array.join("");
console.log("join time: " + (new Date().getTime() - startTime));

Diuji di Chrome 72.0.3626.119, Firefox 65.0.1, Edge 42.17134.1.0. Perhatikan bahwa ini lebih cepat bahkan dengan pembuatan array disertakan!

Tolok ukurnya ada yang sepele. Menggabungkan tiga item yang sama berulang kali akan menjadi sebaris, hasilnya akan terbukti deterministik dan memoized, sampah handler hanya akan membuang objek array (yang ukurannya hampir tidak ada) dan mungkin hanya mendorong dan mengeluarkan tumpukan karena tidak ada referensi eksternal dan karena string tidak pernah berubah. Saya akan lebih terkesan jika pengujiannya adalah sejumlah besar string yang dibuat secara acak. Seperti dalam satu atau dua pertunjukan string.

Array. Bergabunglah dengan FTW!

Saya akan mengatakan bahwa dengan string lebih mudah untuk mengalokasikan buffer yang lebih besar. Setiap elemen hanya 2 byte (jika UNICODE), jadi meskipun Anda konservatif, Anda dapat mengalokasikan buffer yang cukup besar untuk string. Dengan arrayssetiap elemen lebih "kompleks", karena setiap elemen adalah Object, jadi implementasi konservatif akan mengalokasikan ruang untuk lebih sedikit elemen.

Jika Anda mencoba menambahkan for(j=0;j<1000;j++)sebelum masing-masing, forAnda akan melihat bahwa (di bawah chrome) perbedaan kecepatan menjadi lebih kecil. Pada akhirnya itu masih 1,5x untuk penggabungan string, tetapi lebih kecil dari 2,6 yang sebelumnya.

DAN harus menyalin elemen, karakter Unicode mungkin lebih kecil dari referensi ke Objek JS.

Sadarilah bahwa ada kemungkinan bahwa banyak implementasi mesin JS memiliki pengoptimalan untuk array tipe tunggal yang akan membuat semua yang saya tulis tidak berguna :-)

Tes ini menunjukkan hukuman sebenarnya menggunakan string yang dibuat dengan penggabungan tugas vs dibuat dengan metode array.join. Meskipun kecepatan keseluruhan penugasan masih dua kali lebih cepat di Chrome v31 tetapi tidak lagi sebesar saat tidak menggunakan string yang dihasilkan.

Ini jelas tergantung pada implementasi mesin javascript. Bahkan untuk versi berbeda dari satu mesin Anda bisa mendapatkan hasil yang sangat berbeda. Anda harus melakukan patokan Anda sendiri untuk memverifikasi ini.

Saya akan mengatakan itu String.concatmemiliki kinerja yang lebih baik di versi terbaru V8. Namun untuk Firefox dan Opera, Array.joinadalah pemenangnya.

Dugaan saya adalah bahwa, sementara setiap versi mengenakan biaya banyak penggabungan, versi gabungan juga membangun array.