Hướng dẫn javascript string concatenation performance - hiệu suất nối chuỗi javascript

Khi chúng ta mã JavaScript, đôi khi chúng ta cần kết hợp các chuỗi với nhau. Ngắn và một số chuỗi là tốt, nhưng khi nói đến dài và nhiều chuỗi như chuỗi HTML, mọi thứ khá khác nhau.

Phương thức của chuỗi Concat

Chỉ cần sử dụng ‘+=, để làm một concat.

var strA = '...', // large string
strB = '...', // also large string
...
strN = '...'; // dozens of large strings
var result = ''; // final result string
result += strA;
result += strB;
...
result += strN;

Sử dụng push()join() của array.

var strA = '...', // large string
strB = '...', // also large string
...
strN = '...'; // dozens of large strings
var arr = []; // temporary array of strings
arr.push(strA);
arr.push(strB);
...
arr.push(strN);
var result = arr.join(); // get final result string

Sử dụng chỉ mục mảng và join() của array.

var strA = '...', // large string
strB = '...', // also large string
...
strN = '...'; // dozens of large strings
var arr = []; // temporary array of strings
arr[0] = strA;
arr[1] = strB;
...
arr[n] = strN;
var result = arr.join(); // get final result string

Như bạn có thể thấy, ba phương pháp chính đều dễ dàng mã. Nhưng làm thế nào về hiệu suất của họ? Hãy cùng kiểm tra nào.

Hiệu suất của các phương pháp

Xem, trong NodeJS, chúng tôi có thể sử dụng

var strA = '...', // large string
strB = '...', // also large string
...
strN = '...'; // dozens of large strings
var arr = []; // temporary array of strings
arr.push(strA);
arr.push(strB);
...
arr.push(strN);
var result = arr.join(); // get final result string
0 để có được thời gian của toàn bộ quá trình. Nếu chúng ta chạy phương thức càng nhiều càng tốt, thời lượng chúng ta nhận được sẽ chính xác hơn. Vì vậy, hãy để thử nó.

function method1(times) {
var tick = process.hrtime();
var str = '';
for (var i = 0; i < times; i++) {
str += StringA;
}
var ntick = process.hrtime(tick);
return ntick[0] * 1000 + ntick[1] / 10e6;
}
function method2(times) {
var tick = process.hrtime();
var str = [];
for (var i = 0; i < times; i++) {
str.push(StringA);
}
str.join('');
var ntick = process.hrtime(tick);
return ntick[0] * 1000 + ntick[1] / 10e6;
}
function method3(times) {
var tick = process.hrtime();
var str = [];
for (var i = 0; i < times; i++) {
str[i] = StringA;
}
str.join('');
var ntick = process.hrtime(tick);
return ntick[0] * 1000 + ntick[1] / 10e6;
}
function averageTest(method, name, N = 100, n = 1000000) {
var total = 0;
for (var i = 0; i < N; i++) {
total += method(n);
}
console.log(name, 'duration:', total / N, 'ms', 'in ' + N + ' tests with ' + n + ' concat loops');
}
var methods = [{
method: method1,
name: '+='
}, {
method: method2,
name: 'push & join'
}, {
method: method3,
name: '[] & join'
}];
methods.map(ele => {
averageTest(ele.method, ele.name);
});
var StringA = 'devchache_from_github;devchache_with_ziyuan';

Và đầu ra là:

# Run string concat in 100 tests with 1000000 concat loops
+= duration: 15.8343 ms
push & join duration: 7.8763 ms
[] & join duration: 8.1284 ms

Kết quả kiểm tra

Một số thử nghiệm của ba phương pháp

*: Bài kiểm tra này không được đề xuất! Mac của tôi mất gần một giờ để có được dòng kết quả đầu tiên của phương thức1. Đừng thử điều này trừ khi bạn muốn lãng phí thời gian.almost an hour to get the first result line of Method1. DO NOT try this unless you want to waste time.

Từ bảng, chúng ta có thể thấy rằng cả thời gian vòng lặp và độ dài chuỗi đơn không ảnh hưởng đến thời gian thực hiện. Yếu tố duy nhất là thời gian liên kết.

  • Khi không có quá 100 nghìn concat, hoạt động trực tiếp ‘+=, mất ít thời gian hơn.
  • Khi có hơn 1 triệu Concat, việc sử dụng join() chắc chắn là tốt hơn, trong khi sử dụng chỉ số mảng để mở rộng các yếu tố thậm chí còn tốt hơn.

Còn gì nữa?

Các bài kiểm tra để tìm ra ngưỡng

Vì vậy, trong vòng 413.085 lần của Concat, sử dụng ‘+=, có hiệu suất tương tự như sử dụng join().

Lưu ý thời gian thực hiện phụ thuộc vào máy của bạn và rất nhiều yếu tố khác. Những dữ liệu này chỉ là ví dụ và bạn không nên coi chúng là một tiêu chuẩn. the duration of execution depends on your machine and a lot of other factors. These data are just examples and you should not regard them as a standard.

Sự kết luận

Theo thử nghiệm, chúng tôi thấy sử dụng ‘+=, khi hoạt động không quá nhiều chuỗi. Và nó có thể nhanh hơn để sử dụng join() của mảng khi bạn xử lý nhiều dữ liệu, đặc biệt là mở rộng một mảng chuỗi với chỉ mục. Nhưng chúng ta có thể tìm thấy độ dài của mỗi chuỗi nguyên tử không ảnh hưởng đến hoạt động. Từ dữ liệu, rõ ràng là trong sự phát triển thực sự, không có quá nhiều cơ hội để đối phó với hơn 413.085 chuỗi nguyên tử. Mặc dù thời lượng chỉ là vài mili giây, nhưng chắc chắn sẽ ổn khi sử dụng bất kỳ phương pháp nào khi thực hiện các chuỗi liên kết.

Và nếu bạn muốn tìm hiểu lý do tại sao tốc độ của các phương pháp này khác nhau, bạn có thể đọc mã gốc của công cụ JavaScript như Google V8.

Cảm ơn vì đã đọc.