자바스크립트 성능 (Performance)

자바스크립트 코드 속도를 높이는 방법.


루프(Loops)내의 활동(Activity)을 줄인다

루프는 프로그램에 자주 사용됩니다.

for 문을 포함하고 있는 루프의 각 명령문(statement)은 루프를 반복할 때마다 실행됩니다.

명령문이나 할당(Statements or assignments)을 루프 외부에 배치하면, 루프를 더 빠르게 실행합니다.

Bad:


var i;
for (i = 0; i < arr.length; i++) {

Better Code:


var i;
var l = arr.length;
for (i = 0; i < l; i++) {

나쁜 코드는 루프를 반복할 때마다 배열의 length 속성에 액세스합니다.

더 나은 코드는, 루프 외부의 length 속성에 액세스함으로, 루프를 더 빠르게 실행합니다.


DOM 액세스(access) 줄이기

HTML DOM에 액세스하는 것은, 다른 자바스크립트 문과 비교할 때, 매우 느립니다.

DOM 요소에 여러 번 액세스하려는 경우, 한 번 액세스하고, 로컬 변수로 사용하십시오:

Example

Hello



DOM 크기 줄이기

HTML DOM의 요소 수를 작게 유지하십시오.

이것은 항상 페이지 로딩을 향상시키고, 특히 더 작은 장치(smaller devices)에서 렌더링(페이지 표시) 속도가 빨라집니다.

DOM(getElementsByTagName과 같은) 검색을 할 때, 더 작은 DOM이 이점이 있습니다.


불필요한 변수 피하기

값을 저장하지 않을 경우, 새 변수를 만들지 마십시오.

아래 코드를 대체할 수 있습니다:


var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

이것으로:


document.getElementById("demo").innerHTML = firstName + " " + lastName

자바 크립트 로딩 지연

스크립트를 페이지 본문의 맨 아래에 배치하면, 브라우저가 페이지를 먼저 로드합니다.

스크립트가 다운로드 되는 동안에, 브라우저는 다른 다운로드를 시작하지 않습니다. 그리고 모든 구문 분석 및 렌더링 작업(all parsing and rendering activity)이 차단됩니다.

대안으로 스크립트 태그에 defer = "true"를 사용합니다 . defer 속성은, 페이지가 구문 분석(parsing)을 끝낸 후에 스크립트를 실행시키지만, 외부 스크립트에서만 작동합니다.

가능하다면, 페이지가 로드된 후, 페이지에 스크립트를 코드로 추가할 수 있습니다:

Example




with 사용하지 않기

with 키워드를 사용하지 마십시오. 속도에 부정적인 영향을 미칩니다. 또한 자바스크립트 범위(scopes)를 혼란스럽게 합니다(clutters up).

strict mode에서 with 키워드는 사용할 수 없습니다.

출처: JavaScript Performance

Leave a comment