Оптимизация конкатенации большого количества строк — работает ли?

Question

[mester]

Набрёл в поисках методов оптимизации скорости работы JS сайта на такой метод:

// Пример 1 - использование конкатенации
var str = "Вычисленная площадь равна " + sq + "м2, а объем соответственно " + v + "м3";

// Пример 2 - использование функции join().
var str2 = ["Вычисленная площадь равна " , sq , "м2, а объем соответственно " , v , "м3"].join("");

Это действительно дает значительный прирост производительности при использовании join? Или это спичечная оптимизация?

Answer 1

[avalak]

Неужели так сложно протестировать? (вывод в консоли).

// Конкатенация 100000 случайных строк test1: 36ms // + test2: 119ms // join

Comments

[avalak]

Форматирование пропало =(

// Конкатенация 100000 случайных строк
// test1: 36ms // +
// test2: 119ms // join

[Silver_Clash]

Результат сильно зависит от браузера. В современных браузерах с конкатенацией нет проблем, зато в IE6 она работает очень медленно.

[Vitaliy Petrychuk]

Всегда используйте join, он чуток утупает в скорости в некоторых браузерах. Зато на больших строках в старых браузерах работает шустрее.

[mester]

Я думаю что стоит использовать и тот и другой метод по смыслу в коде.

В последней опере:
test1: 91ms (90560µsec)
test2: 26ms (26218µsec)

В хроме и фф обычная конкатенация в разы быстрее.

[lastwish]

Для поиска ответов на такие вопросы использую jsperf.com, на тему «concat vs join» там много тестов можно найти, например jsperf.com/join-concat/2 — там виден проигрыш от join новых Chrome/FF и выигрыш iPhone/iPad/Safari. Причём проигрыш при большой производительности (с 13211 до 7408 ops/sec) на практике должен быть куда менее заметен, чем выигрыш при меньшей производительности (с 767 до 2218 ops/sec).

Но задумываться об оптимизации на клиенте стоит при конкатенации десятков тысяч строк, при малом количестве лучше выбрать вариант, который читается лучше.

[avalak]

«Определяй поддержку функциональности а не браузер» — хорошее правило. Но поскольку join есть везде, то можно просто подменять нативную реализацию на свою в определённых браузерах и везде использовать Array.join(). Это будет и удобно и производительность просядет минимально (черновик. в нём наверняка есть что исправить).