Javascript_javascript 기술의 루프 최적화에 대한 심층적인 이해

루프는 대부분의 프로그래밍 언어가 가지고 있는 기본 기능이며 JS도 예외는 아닙니다. JS는 해석된 언어이며 브라우저 환경에서 실행되므로 클라이언트의 소프트웨어 및 하드웨어 조건이 실행 효율성에 큰 영향을 미칩니다. JS의. 그러나 클라이언트 환경은 알 수 없고 다양하며 개발자가 변경하기 어렵기 때문에 코드 품질을 최적화하는 것이 코드 효율성을 향상시키는 주요 방법입니다.
JS 코드에서 루프는 성능 문제를 쉽게 일으킬 수 있는 요소입니다. 루프의 특성을 이해하고 이를 목표 방식으로 최적화하면 성능이 향상될 수 있습니다.
For, while, do-while 루프:
이 세 루프의 루프 효율성은 유사하므로 적절한 적용 시나리오에 따라 선택하면 됩니다.
for 루프를 예로 들어 보겠습니다.

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

var aValues ​​​​= ["a", "b", "c", "d"];
for(var i = 0; i fDoSomethingA(aValues[i]) ;
fDoSomethingA(aValues[i]);
}

위의 예에서 각 루프는 i의 길이와 배열을 비교해야 합니다. 따라서 배열 길이는 매번 다시 읽어야 합니다. 루프 중에 배열 길이가 일정하면 이를 수행할 필요가 없기 때문에 길이를 읽는 대신 지역 변수를 사용할 수 있습니다. 마찬가지로, 예제에서는 aValues[i]를 두 번 이상 읽었으므로 이를 지역 변수에 할당할 수도 있습니다.

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

var aValues ​​​​= ["a", "b", "c", "d"], nLength = aValues.length;
for(var i = 0, sValue; i < nLength; i = 1){
sValue = aValues[i];
fDoSomethingA(sValue);
fDoSomethingB(sValue);
}

루프의 비즈니스 로직이 루프 순서에 민감하지 않은 경우 역방향 루프를 시도해 볼 수 있습니다. 즉, 카운터를 0으로 감소시킵니다.

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

var aValues ​​​​= ["a" , "b", "c", "d"], nLength = aValues.length;
for(var i = nLength, sValue; i -= 1;){
sValue = aValues[i];
fDoSomethingA(sValue );
fDoSomethingB(sValue);
}

이 방법을 사용하면 기본적으로 카운터가 0과 비교되며 로컬 변수 비교도 생략됩니다. 이론적으로 효율성을 향상시킬 수 있습니다.
for-in 루프:
for-in 루프는 객체 속성을 탐색하는 데 사용됩니다. 객체 속성에 대한 검색은 프로토타입 체인의 맨 위에서 계속됩니다. 루프 효율성을 줄입니다. for-in 루프를 작성하는 방식에는 최적화할 여지가 없으며 이를 사용할 때 특정 원칙을 따라야 합니다. for-in 루프는 데이터 객체를 탐색할 때만 사용하십시오.
탐색할 객체의 속성이 명확한 경우 배열 루프를 대신 사용할 수 있습니다.
예를 들어 연락처 개체를 순회합니다.

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

var aContact = ["N", "FN", "EMAIL;PREF", ...];
for(var i = aContact.length; i -= 1;){
fDoSomething(aContact [i]) ;
}

더프 전략
더프 전략의 주요 원리는 루프를 풀어서 횟수를 줄여 효율성을 높이는 것입니다. 예를 들어
일반 루프:

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

for(var i = aValues.length; i -= 1){
fDoSomething(aValues[i]);
}

aValues.length == N이면 효율성은 다음과 같습니다. 다음과 같이 작성하면 루프보다 높아집니다.

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

fDoSomething(aValues[ 0]);
fDoSomething(aValues[1]);
fDoSomething(aValues[2]);
fDoSomething(aValues[3]);
.. .
...
fDoSomething(aValues[N-1]);

그러나 N이 큰 경우 이 작성 방법은 비현실적이며 Duff 전략은 적당한 루프 확장입니다. 전략.
최근 NetEase 사서함 연락처의 초기화 주기에 Duff 전략이 추가되었습니다.

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

var nLength = aContacts.length,
//총 라운드 수
nRounds = Math.floor( nLength / 8),
// 추가 여백
nLeft = nLength % 8,
i = 0;
// 나머지부터 처리
if(nLeft){
do{
fFormat(aContacts[i ]);
}while(-- nLeft)
}
//라운드당 8번 서식 지정
if(nRounds){
do{
fFormat(aContacts[i ]);
fFormat(aContacts[i ] );
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat (aContacts[i ]);
fFormat(aContacts[i ]);
}while(-- nRounds)
}

위에 표시된 대로 루프의 각 라운드는 다음을 수행할 수 있습니다. 8개의 연락처 데이터에 대해 포맷 작업을 수행하고 루프를 사용하여 나머지 연락처를 처리합니다. 접점이 많을수록 총 사이클 수가 크게 줄어들어 사이클 소모를 줄일 수 있음을 알 수 있습니다. 또한 Duff 전략에서 제안하는 최적값은 8이다.
실제 테스트에서는 IE에서는 10~20% 이상의 성능 향상을 가져올 수 있는 반면, IE가 아닌 브라우저에서는 거의 차이가 없는 것으로 나타났습니다.
결론: 테스트 중에 IE가 아닌 브라우저에서는 최적화 후와 최적화 전 사이의 효율성 차이가 그리 크지 않거나 심지어 무시할 수 있는 것으로 나타났습니다.