JavaScript code_javascript 기술을 최적화하는 방법 요약

JavaScript 코드 최적화
저자: Gregory Baker, GMail 소프트웨어 엔지니어 및 Erik Arvidsson, Google Chrome 소프트웨어 엔지니어
필수 경력: JavaScript 실무 지식
클라이언트 측 스크립팅을 통해 애플리케이션을 더욱 동적이고 활동적으로 만들 수 있습니다. 그러나 브라우저에서 코드를 구문 분석하면 효율성 문제가 발생할 수 있으며 이러한 성능 차이는 클라이언트마다 다릅니다. 여기서는 JavaScript 코드 최적화에 대한 몇 가지 팁과 모범 사례를 논의하고 제공합니다. 문자열 연결 작업은 Internet Explorer 6 및 7의 가비지 수집에 큰 영향을 미칩니다. 이 문제는 Internet Explorer 8에서 해결되었지만 문자열 연결 IE8 및 기타 IE가 아닌 브라우저(예: Chrome)에서 약간 더 효율적입니다. 많은 사용자가 Internet Explorer 6 또는 7을 사용하고 있으므로 문자열 작성 방법에 매우 주의해야 합니다.
다음 샘플 코드가 있습니다.


코드 복사

코드는 다음과 같습니다: var VeryLongMessage = '이것은 엄격한 줄 길이 제한으로 인해 긴 문자열입니다.'

maxCharsPerLine

' 줄당 문자는 '
percentWhoDislike
'%가 이 규칙을 싫어합니다. 줄 길이 제한은 '
' 스타일 목적을 위한 것입니다. '
' 그래서 문제는 래핑을 어떻게 해야 하느냐는 것입니다.


join 메서드를 사용하는 대신 Join()을 사용해 보세요.

코드 복사

코드는 다음과 같습니다. var VeryLongMessage = ['긴 내용입니다. 엄격한 줄 길이 제한으로 인해 ',

maxCharsPerLine,

' 줄당 문자를 묶어야 합니다. ',
percentWhoDislike,
'%의 엔지니어가 이 규칙을 싫어합니다. ',
' 스타일 목적을 위한 것이지만 성능에 영향을 미치기를 원하지 않습니다.',
' 그래서 질문은 래핑을 어떻게 해야 합니까?
].join() ;


마찬가지로 조건문과 루프에서 문자열을 연결하는 것은 비효율적입니다.

코드 복사

코드는 다음과 같습니다. var fibonacciStr = '첫 번째 20 피보나치 수' for (var i = 0; i < 20; i ) {

fibonacciStr = i ' = ' fibonacci(i) '

'
}



올바른 방법:

복사 code

코드는 다음과 같습니다. var strBuilder = ['처음 20개의 피보나치 수:'] for (var i = 0; i < ; 20; i ) {

strBuilder.push(i, ' = ', fibonacci (i))

}
var fibonacciStr = strBuilder.join('')

도우미 함수에 의해 생성된 문자열 구성

전달 문자열 작성기(배열 또는 도우미 클래스일 수 있음)를 함수에 전달하여 임시 결과가 포함된 문자열을 방지하려면 긴 문자열을 작성하세요.
예를 들어 buildMenuItemHtml_이 리터럴 문자열과 변수에서 문자열을 작성해야 하고 다음을 사용하는 대신 문자열 빌더가 내부적으로 사용된다고 가정합니다.

코드 복사

코드는 다음과 같습니다. var strBuilder = [] for (var i = 0; i < menuItems.length; i ) { strBuilder; .push(this.buildMenuItemHtml_(menuItems[i])); }

var menuHtml = strBuilder.join()

다음을 사용하는 대신:

코드 복사

코드는 다음과 같습니다. var strBuilder = [] for (var i = 0; i < ; menuItems.length; i ) { this.buildMenuItem_(menuItems[i], strBuilder ; baz.Bar의 인스턴스를 구성할 때 foo에 대한 새 함수와 클로저가 생성됩니다.

코드 복사


코드는 다음과 같습니다.

baz.Bar = function() { //생성자 코드this.foo = function() {
// 메소드 코드
}

권장 방법은 다음과 같습니다.

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

baz.Bar = function() {
// 생성자 코드
}
baz.Bar.prototype.foo = function() {
// 메소드 코드
};

이렇게 하면 baz.Bar 인스턴스가 아무리 많이 생성되어도 foo에 대해 하나의 함수만 생성되고 클로저는 생성되지 않습니다.
인스턴스 변수를 초기화합니다.
은 값 유형(비참조)의 초기화 값이 있는 변수 선언/초기화 코드를 프로토타입 프로토타입에 직접 배치합니다. 이렇게 하면 함수가 불필요하게 초기화 코드를 실행할 때마다 생성자를 호출하는 것을 방지할 수 있습니다. 초기화 값이 생성자 매개변수에 의해 결정되거나 생성 시 상태가 불확실한 인스턴스 변수.)
예를 들어 다음과 같이 쓰는 대신

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

foo.Bar = function() {
this.prop1_ = 4
this.prop2_ = true; 🎜>this.prop3_ = [];
this.prop4_ = 'blah';


다음을 작성해 보세요.

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

foo.Bar = function() {

this.prop3_ = []
};
foo.Bar.prototype.prop1_ = 4;
foo.Bar.prototype.prop2_ = true;
foo.Bar.prototype.prop4_ = 'ㅋ'

🎜>
클로저는 주의해서 사용하세요

클로저는 JavaScript의 강력하고 유용한 기능이지만 다음과 같은 단점도 있습니다. 클로저는 메모리 누수의 가장 일반적인 원인입니다. 클로저를 생성하는 것은 클로저 없이 인라인 함수를 생성하는 것보다 훨씬 느리고, 정적 함수를 재사용하는 것보다 더 느립니다. 예:



코드 복사

코드는 다음과 같습니다. function setupAlertTimeout() { var msg = '표시할 메시지'

window.setTimeout(function() { Alert(msg) ); }, 100);

}


은 다음 코드보다 느립니다.

코드 복사

코드는 다음과 같습니다. function setupAlertTimeout() { window.setTimeout(function() {

var msg = '메시지를 표시하려면';

alert (msg);
}, 100);
}


은 다음 코드보다 훨씬 느립니다.

코드 복사

코드는 다음과 같습니다. function AlertMsg() { var msg = '표시할 메시지'

alert(msg);

}
function setupAlertTimeout() {
window.setTimeout(alertMsg, 100);
}


브라우저가 속성을 구문 분석할 때 범위 체인을 추가했습니다. , 범위 체인의 각 수준을 한 번씩 확인해야 합니다. 다음 예에서는

코드 복사

코드는 다음과 같습니다. 🎜> var a = 'a'; function createFunctionWithClosure() { var b = 'b'

return 함수() {

var c = 'c' ;
a;

}
var f = createFunctionWithClosure()


f가 호출되면 참조 a는 참조 b보다 느리고 둘 다 참조 c보다 느립니다.

IE에서 클로저 사용에 대한 자세한 내용은 IE JScript 성능 권장 사항 파트 3: JavaScript 코드 비효율성을 확인하세요.

사용하지 마세요<span style="COLOR: #336600">with</span>

코드에서 <span style="COLOR: #336600">with</span>를 사용하지 마세요. 범위 체인을 수정하여 다른 범위에서 변수를 조회하는 데 비용이 많이 들기 때문에 성능에 매우 나쁜 영향을 미칩니다.

브라우저 메모리 누수 방지

메모리 누수는 웹 애플리케이션에서 매우 흔한 문제이며 심각한 성능 문제를 일으킬 수 있습니다. 브라우저의 메모리 사용량이 증가하면 나머지 사용자 시스템과 함께 웹 애플리케이션의 속도가 느려집니다. 웹 애플리케이션의 메모리 누수는 JavaScript 엔진과 브라우저 DOM의 C 개체 구현 간의 순환 참조입니다(예: JavaScript 엔진과 Internet Explorer의 COM 인프라 간 또는 JavaScript 엔진과 Firefox의 XPCOM 인프라 아키텍처 룸 간).

다음은 메모리 누수를 방지하기 위한 몇 가지 경험 법칙입니다.

이벤트 시스템을 사용하여 이벤트 핸들러 연결

가장 일반적인 순환 참조 패턴 [DOM 요소--> 이벤트 핸들러--> 클로저 범위--> DOM]은 이 문서에 있습니다. 이 문제를 방지하려면 Google doctype, Dojo 또는 JQuery.

또한 IE에서 인라인 이벤트 핸들러를 사용하면 또 다른 유형의 누출이 발생합니다. 이는 일반적인 순환 참조 누출이 아니라 메모리의 임시 익명 스크립트 개체 누출입니다.

이해하세요. 및 Internet Explorer 누출 패턴 해결 의 "DOM 삽입 순서 누출 모델" 섹션도 에 있으며 JavaScript Kit 튜토리얼에도 예제가 있습니다. expando 속성을 사용하지 마세요

확장 속성은 DOM 요소에 연결된 임의의 JavaScript 속성이며 순환 참조의 일반적인 원인입니다. 메모리 누수를 일으키지 않고 확장 속성을 사용할 수 있지만 실수로 누수가 발생하기 쉽습니다. DOM 요소--> 중간 객체--> DOM 요소]를 사용하려는 경우에는 사용하지 않는 것이 좋습니다. Simple 유형을 사용하고 더 이상 필요하지 않으면 확장 속성을 null로 설정하세요. Internet Explorer 누출 패턴 이해 및 해결

"순환 참조" 섹션을 참조하세요.