оператор + менее эффективен, чем StringBuffer.append ()

В моей команде мы обычно выполняем конкатенацию строк следующим образом:

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

Очевидно, что гораздо удобнее читать следующее:

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

Но эксперты JS утверждают, что +оператор менее производительный, чем StringBuffer.append(). Это правда?

Internet Explorer - единственный браузер, который действительно страдает от этого в современном мире. (Версии 5, 6 и 7 были очень медленными. 8 не демонстрирует такой же деградации.) Более того, IE становится все медленнее и медленнее, чем длиннее ваша строка.

Если вам нужно объединить длинные строки, обязательно используйте технику array.join. (Или какую-нибудь оболочку StringBuffer для удобства чтения.) Но если ваши строки короткие, не беспокойтесь.

Ваш пример не очень удачный, поскольку очень маловероятно, что производительность будет существенно отличаться. В вашем примере удобочитаемость должна превосходить производительность, потому что прирост производительности одного по сравнению с другим незначителен. Преимущества массива (StringBuffer) очевидны только тогда, когда вы выполняете много конкатенаций. Даже тогда ваш пробег может сильно зависеть от вашего браузера.

Вот подробный анализ производительности, который показывает производительность с использованием всех различных методов конкатенации JavaScript во многих разных браузерах; Производительность строки и анализ

Подробнее:
Ajaxian >> Производительность строк в IE: Array.join vs + = продолжение

Да, это правда, но тебе все равно. Выбирайте тот, который легче читать. Если вам нужно протестировать приложение, сосредоточьтесь на узких местах.

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

Согласен с Майклом Хареном .

Также рассмотрите возможность использования массивов и присоединения, если производительность действительно является проблемой.

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

Попробуй это:

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

Как уже отметили некоторые пользователи: это не имеет отношения к маленьким строкам.

А новые движки JavaScript в Firefox, Safari или Google Chrome оптимизируют так

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

так же быстро, как

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

JavaScript не имеет собственного объекта StringBuffer, поэтому я предполагаю, что это из библиотеки, которую вы используете, или особенности необычной среды хоста (то есть не браузера).

Я сомневаюсь, что библиотека (написанная на JS) могла бы производить что-либо быстрее, хотя собственный объект StringBuffer мог бы. Окончательный ответ можно найти с помощью профилировщика (если вы работаете в браузере, Firebug предоставит вам профилировщик для движка JS, найденного в Firefox).

По словам Кнута, «преждевременная оптимизация - корень всех зол!» Небольшое отклонение в любом случае, скорее всего, не будет иметь большого эффекта в конце; Я бы выбрал более читаемый.

Более простой для чтения метод экономит людям ощутимое количество времени при просмотре кода, тогда как «более быстрый» метод тратит лишь незаметное и, вероятно, незначительное количество времени, когда люди просматривают страницу.

Я знаю, что это неубедительное сообщение, но я случайно опубликовал что-то совершенно другое, думая, что это другая ветка, и я не знаю, как удалять сообщения. Виноват...

Довольно легко настроить быстрый тест и проверить вариации производительности Javascript с помощью jspref.com. . Которого, вероятно, не было, когда задавали этот вопрос. Но тем, кто сталкивается с этим вопросом, стоит взглянуть на сайт.

Я быстро протестировал различные методы конкатенации на http://jsperf.com/string-concat-methods-test .

Мне нравится использовать функциональный стиль, например:

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")
    ]
  )
)

Этот стиль выглядит читабельным и прозрачным. Это приводит к созданию утилит, уменьшающих повторение кода.

Это также имеет тенденцию автоматически использовать промежуточные строки.

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

Да, по обычным тестам. Например: http://mckoss.com/jscript/SpeedTrial.htm .

Но для маленьких струн это не имеет значения. Вы будете заботиться только об исполнении на очень больших струнах. Более того, в большинстве JS-скриптов узкое место редко связано с манипуляциями со строками, поскольку их недостаточно.

Вам лучше понаблюдать за манипуляциями с DOM.