>웹 프론트엔드 >JS 튜토리얼 >js 문자열 배열 splicing_javascript 기술의 성능 문제 논의

js 문자열 배열 splicing_javascript 기술의 성능 문제 논의

WBOY
WBOY원래의
2016-05-16 16:34:191335검색

JS에서 문자열 연결은 성능이 가장 낮은 작업 중 하나라는 것을 알고 있습니다.
예:

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

var text="안녕하세요"
텍스트 ="세계!"

초기 브라우저는 이 작업을 최적화하지 않았습니다.
문자열은 변경할 수 없으므로 연결 결과를 저장할 중간 문자열을 만드는 것을 의미합니다. 백그라운드에서 문자열을 자주 생성하고 삭제하면 성능이 매우 저하됩니다.

따라서 배열 객체를 최적화에 활용할 수 있습니다.
예:

var buffer=[],i=0; 
buffer[i++]="Hello";  //通过相应索引值添加元素比push方法快 
buffer[i++]=" World!"; 
var text=buffer.join("");

초기 브라우저에서는 중간 문자열 생성 및 소멸이 없었습니다. 문자열 연결 수가 많은 경우 이 기술은 추가를 사용하는 것보다 훨씬 빠른 것으로 입증되었습니다.

요즘 브라우저의 문자열 최적화로 인해 문자열 연결 상황이 바뀌었습니다. Safari, Opera, Chrome, Firefox 및 IE8은 모두 추가 연산자를 사용하여 더 나은 성능을 보여줍니다. 그러나 IE8 이전 버전은 최적화되지 않았기 때문에 배열 방식은 여전히 ​​작동합니다. 이는 문자열 연결 시 브라우저 감지를 수행해야 한다는 의미는 아닙니다. 연결 방법을 결정할 때 고려해야 할 사항은 문자열의 크기와 개수입니다.

문자열이 상대적으로 작고(20자 미만) 연결 개수도 작은 경우(1000 미만) 모든 브라우저는 추가 연산자를 사용하여 1밀리초 이내에 연결을 쉽게 완료할 수 있습니다. 문자열 수나 크기를 늘리면 IE7에서 성능이 크게 저하됩니다. 문자열 크기가 증가함에 따라 Firefox의 추가 연산자와 배열 구성 기술 간의 성능 차이는 작아집니다. 문자열 수가 증가함에 따라 Safari의 덧셈 연산자와 배열 구성 기술 간의 성능 차이는 작아집니다. Chrome 및 Opera의 더하기 연산자는 문자열의 수나 크기를 변경할 때 앞서 있습니다.

따라서 다양한 브라우저에서 일관되지 않은 성능으로 인해 실제 상황과 직면한 브라우저에 따라 선택되는 기술이 달라집니다.

대부분의 경우 추가 연산자가 선호됩니다. 사용자가 주로 IE6 또는 7을 사용하고 문자열 크기가 크거나 많으면 배열 기술이 가치가 있습니다.

일반적으로 의미 문자열인 경우 다음과 같이 배열을 사용하면 안 됩니다.
'안녕하세요 제 이름은' 이름이에요

문자열이 "비슷한 상황의 반복"이라면 다음과 같은 Array를 사용하는 것이 좋습니다.

var array = []; 
for (i = 0; i < length; i++) { 
array[i] = '<li>' + list[i] + '</li'>; 
} 
document.getElementById('somewhere').innerHTML = array.join('\n');

여기서 JS 문자열 배열 연결의 성능 비교를 소개합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.