HTML 문자열을 작성하는 가장 빠른 방법(html 문자열을 조합하는 가장 빠른 방법)

HTML 문자열을 작성하는 가장 빠른 방법(html 문자열을 조합하는 가장 빠른 방법)_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:03:16

원래의

1042명이 탐색했습니다.

HTML 문자열을 작성하는 가장 빠른 방법2009년 5월 29일 James의 'Code Snippets, JavaScript'에 게시됨
원본 텍스트: http://james.padolsey.com/javascript/fastest-way-to-build-an-html - string/

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

var arr = ['항목 1', '항목 2', '항목 3', ...], 
list = '' 
for (var i = 0, l = arr.length; i < l; i ) { 
list = '' arr '
' 
} 
list = '';// 가장 효율적인 방법. 
var arr = ['항목 1', '항목 2', '항목 3', ...], list = [];for (var i = 0, l = arr.length; i < l; i ) { list[list.length] = '' arr '
';}list = '' list.join('') '';; //이전 방법보다 빠릅니다. 

var arr = ['항목 1', '항목 2', '항목 3', ...];var list = '' /li>
') '
';//가장 좋은 방법입니다. 

1000번 실행: "String concat"
(ms)
"Array push"
(ms)
"Native Join()"
(ms )
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
Chrome만 특별하며 첫 번째 방법이 가장 빠릅니다.

중국어 번역 버전
첫 번째 유형: 문자열을 하나씩 추가

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

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

가장 일반적이지만 효율성은 가장 낮습니다. 코드 논리는 비교적 복잡합니다.
두 번째 유형: 배열에 하나씩 밀어 넣기

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

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

이전 방법보다 약간 빠르지만 여전히 충분하지 않습니다...
세 번째 방법: 직접 Join()

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

 
var arr = ['item 1', 'item 2 ', '항목 3', ..]; 
var list = '''
') '; (join()과 같은) 기본 메서드를 사용하면 나중에 어떻게 구현하더라도 일반적으로 다른 메서드보다 훨씬 빠르고 코드가 매우 간결합니다. 

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

브라우저 성능

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