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

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번 실행하는 데 필요한 시간을 표시하세요.