Tại sao nối chuỗi nhanh hơn nối mảng?

Hôm nay, tôi đọc chủ đề này về tốc độ nối chuỗi.

Đáng ngạc nhiên, nối chuỗi là người chiến thắng:

http://jsben.ch/#/OJ3vo

Kết quả là trái ngược với những gì tôi nghĩ. Bên cạnh đó, có rất nhiều bài báo về việc này giải thích một cách trái chiều như thế này .

Tôi có thể đoán rằng các trình duyệt được tối ưu hóa để chuỗi concattrên phiên bản mới nhất, nhưng làm thế nào để họ làm điều đó? Chúng ta có thể nói rằng nó tốt hơn để sử dụng +khi nối các chuỗi không?

Cập nhật

Vì vậy, trong các trình duyệt hiện đại, việc nối chuỗi được tối ưu hóa nên việc sử dụng +các dấu hiệu sẽ nhanh hơn so với việc sử dụng joinkhi bạn muốn nối các chuỗi.

Nhưng @Arthur đã chỉ ra rằng joinnhanh hơn nếu bạn thực sự muốn nối các chuỗi bằng dấu phân cách.

Cập nhật - 2020
Chrome: Array joingần như 2 times fasterlà String concat + Xem: https://stackoverflow.com/a/54970240/984471

Như một lưu ý:

• Mảng joinsẽ tốt hơn nếu bạn cólarge strings
• Nếu chúng ta cần tạo several small stringsở đầu ra cuối cùng, tốt hơn là nên đi với chuỗi kết hợp +, vì nếu không với Mảng sẽ cần một số chuyển đổi Mảng sang Chuỗi ở cuối là quá tải hiệu suất.

Tối ưu hóa chuỗi trình duyệt đã thay đổi hình ảnh nối chuỗi.

Firefox là trình duyệt đầu tiên tối ưu hóa việc nối chuỗi. Bắt đầu từ phiên bản 1.0, kỹ thuật mảng thực sự chậm hơn so với việc sử dụng toán tử cộng trong mọi trường hợp. Các trình duyệt khác cũng đã tối ưu hóa việc nối chuỗi, vì vậy Safari, Opera, Chrome và Internet Explorer 8 cũng hiển thị hiệu suất tốt hơn bằng cách sử dụng toán tử dấu cộng. Internet Explorer trước phiên bản 8 không có tính năng tối ưu hóa như vậy, và do đó, kỹ thuật mảng luôn nhanh hơn toán tử cộng.

- Viết JavaScript hiệu quả: Chương 7 - Trang web nhanh hơn nữa

Công cụ javascript V8 (được sử dụng trong Google Chrome) sử dụng mã này để thực hiện nối chuỗi:

// 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, "");
}

Vì vậy, bên trong họ tối ưu hóa nó bằng cách tạo InternalArray ( partsbiến), sau đó được lấp đầy. Hàm StringBuilderConcat được gọi với các phần này. Nó nhanh chóng vì hàm StringBuilderConcat là một số mã C ++ được tối ưu hóa rất nhiều. Quá dài để trích dẫn ở đây, nhưng hãy tìm kiếm trong tệp runtime.ccRUNTIME_FUNCTION(MaybeObject*, Runtime_StringBuilderConcat) để xem mã.

Firefox nhanh bởi vì nó sử dụng một thứ gọi là Ropes ( Ropes: một thay thế cho chuỗi ). Một sợi dây về cơ bản chỉ là một DAG, trong đó mỗi Node là một chuỗi.

Vì vậy, ví dụ, nếu bạn muốn a = 'abc'.concat('def'), đối tượng mới được tạo sẽ trông như thế này. Tất nhiên đây không phải là chính xác như thế nào trong bộ nhớ, bởi vì bạn vẫn cần có một trường cho kiểu chuỗi, độ dài và có thể khác.

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

Và b = a.concat('123')

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

Vì vậy, trong trường hợp đơn giản nhất, VM hầu như không phải làm gì. Vấn đề duy nhất là điều này làm chậm các hoạt động khác trên chuỗi kết quả một chút. Ngoài ra, điều này tất nhiên làm giảm chi phí bộ nhớ.

Mặt khác, ['abc', 'def'].join('')thường chỉ cấp phát bộ nhớ để bố trí chuỗi mới trong bộ nhớ. (Có lẽ điều này nên được tối ưu hóa)

Tôi biết đây là một chủ đề cũ, nhưng thử nghiệm của bạn không chính xác. Bạn đang làm output += myarray[i];trong khi nó giống như output += "" + myarray[i];vì bạn đã quên, rằng bạn phải dán các vật dụng lại với nhau bằng một thứ gì đó. Mã concat phải giống như sau:

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

Bằng cách đó, bạn đang thực hiện hai hoạt động thay vì một do các yếu tố kết dính với nhau.

Array.join() nhanh hơn.

Đối với số lượng lớn dữ liệu tham gia nhanh hơn, vì vậy câu hỏi được nêu không chính xác.

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));

Đã thử nghiệm trên Chrome 72.0.3626.119, Firefox 65.0.1, Edge 42.17134.1.0. Lưu ý rằng nó nhanh hơn ngay cả khi bao gồm tạo mảng!

Các tiêu chuẩn ở đó rất nhỏ. Việc kết hợp ba mục giống nhau nhiều lần sẽ được liên kết, kết quả sẽ được chứng minh là xác định và được ghi nhớ, trình xử lý rác sẽ chỉ vứt bỏ các đối tượng mảng (sẽ không có kích thước nào) và có thể chỉ được đẩy và bật ra khỏi ngăn xếp do không tham chiếu bên ngoài và vì các chuỗi không bao giờ thay đổi. Tôi sẽ ấn tượng hơn nếu thử nghiệm là một số lượng lớn các chuỗi được tạo ngẫu nhiên. Như trong một hoặc hai chuỗi giá trị của hợp đồng biểu diễn.

Array. tham gia FTW!

Tôi sẽ nói rằng với các chuỗi, việc phân bổ trước một bộ đệm lớn hơn sẽ dễ dàng hơn. Mỗi phần tử chỉ có 2 byte (nếu UNICODE), vì vậy ngay cả khi bạn thận trọng, bạn có thể phân bổ trước một bộ đệm khá lớn cho chuỗi. Với arraysmỗi phần tử thì "phức tạp" hơn, bởi vì mỗi phần tử là một Object, vì vậy việc triển khai bảo thủ sẽ phân bổ trước không gian cho ít phần tử hơn.

Nếu bạn cố gắng thêm một for(j=0;j<1000;j++)trước mỗi cái, forbạn sẽ thấy rằng (dưới chrome) sự khác biệt về tốc độ trở nên nhỏ hơn. Cuối cùng, nó vẫn là 1,5x cho việc nối chuỗi, nhưng nhỏ hơn 2,6 lần trước đó.

VÀ phải sao chép các phần tử, một ký tự Unicode có thể nhỏ hơn một tham chiếu đến một Đối tượng JS.

Hãy lưu ý rằng có khả năng nhiều triển khai của công cụ JS có tối ưu hóa cho các mảng kiểu đơn sẽ làm cho tất cả những gì tôi đã viết trở nên vô dụng :-)

Bài kiểm tra này cho thấy hình phạt của việc thực sự sử dụng một chuỗi được thực hiện bằng phép ghép nối so với được thực hiện bằng phương thức array.join. Mặc dù tốc độ chuyển nhượng tổng thể vẫn nhanh gấp đôi trong Chrome v31 nhưng nó không còn lớn như khi không sử dụng chuỗi kết quả.

Điều này rõ ràng phụ thuộc vào việc triển khai công cụ javascript. Ngay cả đối với các phiên bản khác nhau của một công cụ, bạn có thể nhận được kết quả khác nhau đáng kể. Bạn nên làm điểm chuẩn của riêng mình để xác minh điều này.

Tôi muốn nói rằng điều đó String.concatcó hiệu suất tốt hơn trong các phiên bản gần đây của V8. Nhưng đối với Firefox và Opera, Array.joinlà một người chiến thắng.

Tôi đoán rằng, trong khi mọi phiên bản đều có chi phí của nhiều phép nối, các phiên bản nối đang xây dựng các mảng thêm vào đó.