jest operatorem + mniej wydajnym niż StringBuffer.append ()

W moim zespole zwykle wykonujemy konkatentację ciągów w następujący sposób:

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

Oczywiście znacznie bardziej czytelne jest:

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

Ale eksperci JS twierdzą, że +operator jest mniej wydajny niż StringBuffer.append(). Czy to prawda?

Internet Explorer jest jedyną przeglądarką, która naprawdę cierpi z tego powodu w dzisiejszym świecie. (Wersje 5, 6 i 7 były wolne dla psów. 8 nie wykazuje takiej samej degradacji). Co więcej, IE staje się wolniejszy i wolniejszy, im dłuższa jest twoja struna.

Jeśli masz długie ciągi do połączenia, zdecydowanie użyj techniki array.join. (Lub jakieś opakowanie StringBuffer dookoła tego dla czytelności.) Ale jeśli twoje łańcuchy są krótkie, nie przejmuj się.

Twój przykład nie jest dobry, ponieważ jest bardzo mało prawdopodobne, aby występ był znacząco inny. W twoim przykładzie czytelność powinna przewyższać wydajność, ponieważ wzrost wydajności jednego z drugim jest pomijalny. Zalety tablicy (StringBuffer) są widoczne tylko wtedy, gdy wykonujesz wiele konkatentacji. Nawet wtedy Twój przebieg może się bardzo różnić w zależności od przeglądarki.

Oto szczegółowa analiza wydajności, która pokazuje wydajność przy użyciu różnych metod konkatenacji JavaScript w wielu różnych przeglądarkach; Analiza wydajności strun

Więcej:
Ajaxian >> Wydajność ciągów w IE: Array.join vs + = kontynuacja

Tak, to prawda, ale nie powinno cię to obchodzić. Wybierz ten, który jest łatwiejszy do odczytania. Jeśli musisz przetestować swoją aplikację, skup się na wąskich gardłach.

Domyślam się, że konkatenacja ciągów nie będzie Twoim wąskim gardłem.

Uzgodniono z Michaelem Harenem .

Rozważ także użycie tablic i łączenie, jeśli wydajność jest rzeczywiście problemem.

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

Spróbuj tego:

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

Jak już zauważyli niektórzy użytkownicy: Nie ma to znaczenia dla małych ciągów.

A nowe silniki JavaScript w Firefoksie, Safari lub Google Chrome optymalizują tak

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

jest tak szybki jak

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

JavaScript nie ma natywnego obiektu StringBuffer, więc zakładam, że pochodzi on z biblioteki, której używasz, lub z funkcji nietypowego środowiska hosta (tj. Nie z przeglądarki).

Wątpię, by biblioteka (napisana w JS) wyprodukowała coś szybciej, chociaż natywny obiekt StringBuffer mógłby. Ostateczną odpowiedź można znaleźć za pomocą profilera (jeśli korzystasz z przeglądarki, Firebug zapewni Ci profiler dla silnika JS znajdującego się w Firefoksie).

Mówiąc słowami Knutha, „przedwczesna optymalizacja jest źródłem wszelkiego zła!” Tak czy inaczej niewielka różnica najprawdopodobniej nie będzie miała większego wpływu na koniec; Wybrałbym ten bardziej czytelny.

Łatwiejsza do odczytania metoda oszczędza dostrzegalną dla ludzi ilość czasu podczas przeglądania kodu, podczas gdy metoda „szybsza” marnuje tylko niezauważalną i prawdopodobnie znikomą ilość czasu, gdy ludzie przeglądają stronę.

Wiem, że ten post jest kiepski, ale przypadkowo opublikowałem coś zupełnie innego, myśląc, że to inny wątek i nie wiem, jak usunąć posty. Mój błąd...

Bardzo łatwo jest skonfigurować szybki test porównawczy i sprawdzić różnice w wydajności JavaScript za pomocą jspref.com . Które prawdopodobnie nie było w pobliżu, kiedy zadano to pytanie. Ale osoby, które natkną się na to pytanie, powinny spojrzeć na stronę.

Zrobiłem szybki test różnych metod konkatenacji na http://jsperf.com/string-concat-methods-test .

Lubię używać funkcjonalnego stylu, takiego jak:

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

Ten styl wygląda na czytelny i przejrzysty. Prowadzi do tworzenia narzędzi, które zmniejszają liczbę powtórzeń w kodzie.

To również ma tendencję do automatycznego używania ciągów pośrednich.

O ile wiem, każda konkatenacja oznacza realokację pamięci. Zatem problemem nie jest operator, który to robił, rozwiązaniem jest zmniejszenie liczby konkatenacji. Na przykład wykonaj konkatenacje poza strukturami iteracji, kiedy możesz.

Tak, zgodnie ze zwykłymi wzorcami. Np .: http://mckoss.com/jscript/SpeedTrial.htm .

Ale w przypadku małych strun nie ma to znaczenia. Będziesz dbał tylko o występy na bardzo dużych strunach. Co więcej, w większości skryptów JS szyjka butelki rzadko znajduje się na manipulacjach struną, ponieważ jest jej za mało.

Lepiej obserwuj manipulację DOM.