JavaScript 루프 문의 성능 문제

대부분의 프로그래밍 언어에서 루프 문은 대부분의 시간을 소비합니다
그리고 루프 문은 매우 중요한 프로그래밍 패턴입니다

자바스크립트에는 4가지 유형의 루프가 있습니다

1. for 루프

2. while 루프

3. do-while 루프

4. for-in 루프

처음 세 개의 루프는 다른 언어에서도 매우 일반적입니다
for-in 루프는 학교에서 C/C++를 공부한 학생들에게 생소할 수 있습니다
인스턴스 및 프로토타입 속성을 검색합니다. 따라서 반복마다 더 많은 오버헤드가 발생합니다.
for-in 루프는 다른 세 가지 유형보다 1/7만 빠릅니다.
따라서 알 수 없는 수의 속성 객체를 명시적으로 반복해야 하는 경우가 아니면 그렇지 않으면 for-in
배열을 순회하는 for-in 루프는 물론이고

다음과 같은 명확한 객체를 반복할 수 있습니다.

var props = [&#39;prop1&#39;, &#39;prop2&#39;],      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 중국어 넷(m.sbmmt.com)을 참고해주세요!