Javascript_javascript 기술에 따른 문자열 연결 성능에 대해 논의

1 문자열 연결을 수행하는 방법은 무엇입니까?

먼저 문자열 연결의 두 가지 일반적인 방법을 검토해 보겠습니다.
1.1 문자열 연결 연산자 사용

일반적으로 사용되는 언어 ​​( Java, C#, PHP 등)에는 모두 문자열 연결 연산자가 있으며 Javascript도 예외는 아닙니다. 코드 예:

코드 복사 코드는 다음과 같습니다.

var str = "";
str = str "a";

1.2 배열 사용
일반적으로 사용되는 언어에서는 문자열 연결 연산의 성능이 일반적으로 높지 않습니다. 이러한 이유로 문자열 연결을 위해 C#에서는 StringBuilder가 제공됩니다(StringBuffer는 Java에서 제공됩니다). Javascript에는 Array를 통해 StringBuilder를 시뮬레이션하는 솔루션이 있습니다.

코드 복사 코드는 다음과 같습니다.

var str = []; for (var i = 0; i < 100; i ) {

str[i] = "12345"
}
str = str.join("")



2 테스트

다음은 문자열 복사 과정을 통해 두 가지 방법의 성능을 테스트합니다.
2.1 문자열 연결 연산자를 통한 복사:

코드 복사 코드는 다음과 같습니다. function copyByOperator(str, times) {

　var newStr = "";　for (var i = 0; i < times; i ) {

　 newStr =
　}
return newStr;


2.2 배열을 통해 복사:

코드 복사

코드는 다음과 같습니다. function copyByArray(str, times) { var newStr = [] for (var i = 0; i < times; i ) { newStr[i] = str;

}

　return newStr.join("");
}


str은 길이가 61인 고정 HTML 문자열을 사용합니다.

2.3 IE에서 테스트

IE의 성능이 상대적으로 좋지 않다는 점을 고려하여 먼저 작은 곱하기 값(6000)을 사용하여 IE 6, IE 7, IE 8에서 테스트합니다. 10회 실행 후 평균값을 취하면 다음과 같습니다.


IE6, 7, IE8의 테스트 결과는 확연히 다릅니다. IE 8이 문자열 연결 연산을 최적화했으며 효율성도 이미 배열 복사 방식보다 높습니다
.

IE浏览器下的测试结果

浏览器	copyByOperator	copyByArray
IE 6	1780.4ms	9.5ms
IE 7	1754.6ms	7.7ms
IE 8	1.6ms	9.4ms

2.4 다양한 브라우저에서 테스트

다음은 다양한 브라우저의 최신 버전을 테스트하기 위해 상대적으로 큰 시간 값(50000)을 사용합니다.

정말 예상치 못한 결과네요. IE 8에서의 문자열 연결 작업은 실제로 Chrome을 제외한 모든 브라우저를 압도합니다. 항상 IE 성능이 낮다고 말하는 사람들은 주의해야 합니다. Chrome에서는 문자열 연결 작업이 배열 복사 방법보다 더 효율적입니다.

3개 요약

各种浏览器的测试结果

浏览器	copyByOperator	copyByArray
IE 8	21.8ms	54.7ms
Firefox 3.6	40.9ms	27.9ms
Chrome 4	4.4ms	10.9ms
Safari 4.0.5	41.6ms	34.6ms
Opera 10.50	33.1ms	23ms

브라우저 성능은 지속적으로 향상되고 있으며, 프론트엔드 엔지니어로서 최상의 성능을 얻으려면 적시에 Javascript 프로그램의 최적화 전략을 조정해야 합니다.