>웹 프론트엔드 >JS 튜토리얼 >JavaScript 루프 문의 성능 문제

JavaScript 루프 문의 성능 문제

黄舟
黄舟원래의
2017-02-28 14:18:421447검색

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

자바스크립트에는 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 중국어 넷(www.php.cn)을 참고해주세요!


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