є оператором + менш ефективним, ніж 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.