JavaScript가 코드 성능을 향상시키는 방법 요약

문자열 누적 계산 스타일 사용

+ 연산을 사용하면 메모리에 새 문자열이 생성되고 연결된 값이 할당됩니다. 결과를 변수에 할당하면 됩니다.
중간 변수를 결과에 연결하는 것을 방지하려면 +=를 사용하여 결과를 직접 할당할 수 있습니다.

느리게 실행되는 코드:

a += 'x' + 'y';

더 빠르게 실행되는 코드:

a += 'x'; a += 'y';

기본 작업은 함수 호출보다 빠릅니다.
성능 요구 사항이 중요한 작업 및 루프에서 대체 기본 형식을 사용하는 것이 좋습니다.
느리게 실행되는 코드:

var min = Math.min(a, b); 
arr.push(val);

더 빠르게 실행되는 코드:

var min = a < b ? a : b; 
arr[arr.length] = val;

setTimeout() 및 setInterval()을 설정할 때 문자열 대신 함수 이름을 전달합니다.

In setTimeout(에 문자열을 전달하는 경우 ) 또는 setInterval()을 사용하면 문자열이 평가 계산되어 속도가 느려집니다.
컴파일 시 해석되고 최적화될 수 있도록 대신 익명 함수 래퍼를 사용하세요.

느리게 실행되는 코드:

setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

더 빠르게 실행되는 코드:

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

객체에서 원치 않는 DOM 참조 사용을 피하세요.

이것을 하지 마세요:

var car = new Object(); 
car.color = "red"; 
car.type = "sedan"

더 나은 형식:

var car = { 
color : "red"; 
type : "sedan" 
}

가장 선명합니다. 목표 속도, 범위 체인 최소화

비효율적인 방법:

var url = location.href;

효율적인 형식:

var url = window.location.href;

스크립트에서 주석을 적게 사용하고 변수 이름이 길지 않도록 하세요
주석을 최소한으로 유지하거나 최대한 피하세요. , 특히 함수, 루프 및 배열 내에서.
댓글은 스크립트 실행을 불필요하게 느리게 만들고 파일 크기를 증가시킵니다. 예:

권장되지 않는 형식:

function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
}

더 나은 작성 방법:

function someFunction() 
{ 
var name="somename"; 
}

현재 범위에 애플리케이션의 외부 변수를 저장합니다.
함수가 실행되면 실행 중인 컨텍스트가 활성 객체로 전달됩니다. 포함된 모든 지역 변수는 컨텍스트 체인 앞으로 푸시됩니다.
스코프 체인에서 가장 느린 것은 명확하게 식별된 식별자입니다. 즉, 지역 변수가 가장 빠릅니다. 자주 사용되는 외부 변수를 읽고 쓰는 속도가 훨씬 빨라졌습니다. 이는 전역 변수 및 기타 심층 식별자 조회에서 특히 두드러집니다.
마찬가지로 현재 범위(var myVar)의 변수는 속성(this.myVar)과 같은 객체보다 더 빠르게 액세스됩니다.

느리게 실행되는 코드:

function doSomething(text) { 
var ps = document.getElementsByTagName('p'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}

더 빠르게 실행되는 코드:

function doSomethingFaster(text) { 
var doc = document, 
ps = doc.getElementsByTagName('p'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}

대규모 루프에서 요소(예: head)에 액세스해야 하는 경우 기본 DOM 액세스(예: get )를 사용하면 됩니다. 더 빠르게.
빠른 코드 실행:

function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get(&#39;head&#39;); 
} 
}

변수를 사용하여 값 캐시 ​​
반복 작업을 수행하는 경우 로컬 변수를 사용하여 값을 캐시합니다.
다음 예제 세트는 지역 변수에 값을 저장하는 것의 광범위한 의미를 보여줍니다.

예제 1. 계산 실행 전에 변수를 사용하여 루프 본문에 수학 함수를 저장합니다.
잘못된 방법:

var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
}

더 나은 처리:

var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
}

예제 2. 배열의 길이를 저장하고 루프에 사용
잘못된 처리 :
배열의 길이는 매번 반복적으로 계산됩니다.

for (var i = 0; i < arr.length; i++) { 
// do something 
}

더 나은 개선:
더 나은 방법은 배열의 길이를 저장하는 것입니다.

for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
}

일반적으로 한 번 수행한 경우에는 필요하지 않습니다. 반복적으로 수행하십시오. 예를 들어, 계산된 표현식의 값이 범위나 함수에서 여러 번 사용되는 경우 이를 변수에 저장하면 여러 번 사용할 수 있습니다. 그렇지 않으면 변수를 선언하고 해당 값에만 적용되는 값을 할당하여 과도하게 사용할 수 있습니다. 한 번. 따라서 이러한 사항을 명심하시기 바랍니다.

위 내용은 JavaScript가 코드 성능을 향상시키는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!