우리 팀에서는 일반적으로 다음과 같이 문자열 연결을 수행합니다.
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(). 정말 사실인가요?
[].join('')정말 유선적인 동작을
url포함 '나 \n.
답변:
귀하의 예는 성능이 크게 다를 가능성이 거의 없다는 점에서 좋은 예가 아닙니다. 귀하의 예제에서 가독성은 성능을 능가해야합니다. 왜냐하면 하나와 다른 하나의 성능 향상은 무시할 수 있기 때문입니다. 배열 (StringBuffer)의 이점은 많은 연결을 수행하는 경우에만 분명합니다. 그래도 마일리지는 브라우저에 따라 크게 달라질 수 있습니다.
다음은 다양한 브라우저에서 모든 다른 JavaScript 연결 방법을 사용하여 성능을 보여주는 자세한 성능 분석입니다. 스트링 성능 및 분석
join()기술을 사용하면 성능이 1000 배 이상 향상되는 것으로 보입니다 .
Michael Haren 과 동의 .
또한 성능이 실제로 문제가되는 경우 어레이 및 조인 사용을 고려하십시오.
var buffer = ["<a href='", url, "'>click here</a>"];
buffer.push("More stuff");
alert(buffer.join(""));+=것이 더 빠르다 는 것을 나타냅니다 .
이 시도:
var s = ["<a href='", url, "'>click here</a>"].join("");Knuth의 말에 따르면, "조기 최적화는 모든 악의 근원입니다!" 어느 쪽이든 작은 방어는 결국 많은 영향을 미치지 않을 것입니다. 더 읽기 쉬운 것을 선택하겠습니다.
빠른 벤치 마크를 설정하고 jspref.com을 사용하여 Javascript 성능 변화를 확인하는 것은 매우 쉽습니다. . 이 질문을 받았을 때 아마 없었을 것입니다. 그러나이 질문에 걸림돌이되는 사람들은 사이트를 살펴보아야합니다.
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 조작을 보는 것이 좋습니다.