대부분의 프로그래밍 언어에서 루프 문은 대부분의 시간을 소비합니다
그리고 루프 문은 매우 중요한 프로그래밍 패턴입니다
자바스크립트에는 4가지 유형의 루프가 있습니다
for 루프
while 루프
do-while 루프
for-in 루프
처음 세 개의 루프는 다른 언어에서도 매우 일반적입니다
for-in 루프는 학교에서 C/C++를 공부한 학생들에게 생소할 수 있습니다
인스턴스 및 프로토타입 속성을 검색합니다. 따라서 반복마다 더 많은 오버헤드가 발생합니다.
for-in 루프는 다른 세 가지 유형보다 1/7만 빠릅니다.
따라서 알 수 없는 수의 속성 객체를 명시적으로 반복해야 하는 경우가 아니면 그렇지 않으면 for-in
배열을 순회하는 for-in 루프는 물론이고
다음과 같은 명확한 객체를 반복할 수 있습니다.
var props = ['prop1', 'prop2'], i = 0;while(i < props.length){ fn(obj[props[i++]]); }
이 코드 객체의 속성을 기반으로 객체 속성의 배열을 생성한 다음 while 루프를 사용하여 속성 목록을 순회하고 해당 속성 값을 처리합니다.
이렇게 하면 객체의 각 속성을 검색할 필요가 없어져 루프 수 오버헤드
위 방법의 전제는 객체의 내부 속성을 알고 있다는 것입니다
객체의 내부 구현을 모른다면
아직 처리해야 할 부분이 있습니다. 개체 자체의 속성을 사용하며 이 작업만 수행할 수 있습니다
for(var prop in obj){ if(obj.hasOwnProperty(prop)){ //... } }
비용은 각 반복에서 속성이 상속된 것이 아니라 개체의 자체 속성인지 여부를 결정해야 한다는 것입니다
-를 제외하고 에서는 다른 루프의 성능도 비슷하므로 꼭 사용하셔야 합니다 필요를 고려해서 루프 종류를 선택하세요
프로그래밍을 막 배운 친구들은 루프 작성에 모두 익숙할 거라 믿습니다
for(var i = 0; i < arr.length; i++){ fn(arr[i]); }
이 루프 문이 반복될 때마다 arr 길이 속성을 찾아야 합니다. 이는 시간이 많이 소요됩니다.
최적화할 수 있도록
for(var i = 0, len = arr.length; i < len; i++){ fn(arr[i]); }
배열 길이 값을 로컬 변수에 캐시합니다. 그래서 문제는 해결되었습니다
while, do-while도 마찬가지입니다
배열 길이에 따라 많은 브라우저에서 실행 시간을 약 25% 절약할 수 있습니다
또한 배열의 순서를 반대로 바꿔서 약간의 성능 향상
for(var i = items.length; i--;){ process(items[i]); }
var j = items.length;while(j--){ process(items[j]); }
var k = items.length - 1;do { process(items[k]); }while(k--);
매번 이렇게 합니다. 반복 제어 조건은 두 가지 판단(반복 횟수가 전체 횟수보다 적은지, 참인지)에서 줄어듭니다.
(사실인지 여부) 하나의 판단으로 루프 속도를 더욱 향상시킵니다.
몇 가지 최종 단어
우리 모두는 arr.forEach() 또는 일부 프레임워크와 같은 배열 방법을 사용해 본 적이 있을 것입니다. jQuery의 $().each()와 같은 반복 메서드를 사용하여 배열을 탐색합니다.
이러한 메서드는 함수를 실행합니다.
편리함에도 불구하고 일반 루프(외부 메서드 호출)보다 훨씬 느립니다.
모든 경우에 , 루프 기반 반복은 함수 기반 반복보다 약 8배 빠릅니다
따라서 문제를 해결하기 위해 일반 루프(for, while, do-while)를 사용할 수 있을 때는 이러한 일반 루프를 사용하려고 합니다
위 내용은 자바스크립트 루프문의 성능 문제에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 넷(www.php.cn)을 참고해주세요!