javascript_javascript 팁에서 HTML 문자열을 연결하는 가장 빠르고 가장 좋은 방법

첫 번째 유형: 문자열을 하나씩 추가

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

var arr = ['item 1', '항목 2', '항목 3', ...];
list = '';
for (var i = 0,
l = arr.length; i < l; i ) {
list = '' arr[i] '';
}
list = '' list '';

이것은 가장 일반적이지만 효율성이 가장 낮습니다! 코드 논리는 비교적 복잡합니다.

두 번째 유형: 배열에 하나씩 밀어 넣기

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

var arr = ['item 1', '항목 2', '항목 3', ...],
list = [];

for (var i = 0,
l = arr.length; i < l; i ) {
list[list.length] = '' arr[i] '';
}
list = '' list.join('') '';

이전 방법보다 약간 빠르지만 여전히 부족합니다...

세 번째 방법: 직접 조인()

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

var arr = ['item 1', '항목 2', '항목 3', ...];

var list = '' arr.join('') '';

나중에 어떻게 구현되든 기본 메서드(예: Join())를 사용하면 일반적으로 다른 메서드보다 훨씬 빠르고 코드가 매우 간결합니다.

브라우저 성능 테스트

각 방법은 길이가 130인 배열을 사용하여 테스트되었으며, 각 요소의 길이는 브라우저가 특정 길이의 문자열에 대해 특별한 최적화를 수행하는 것을 방지하기 위해 각 방법을 1,000회 테스트했습니다. 다음 결과는 다음과 같습니다. 1000번 실행하는 데 필요한 시간을 표시합니다: