효율적인 JavaScript 작성하기

1. 가장 빠른 조건문 판단

if 문의 활용 시나리오

• 2개 이하의 이산값(discrete values)을 판단해야 할 때

• 많은 양의 값이 여러 범위(ranges)로 쉽게 나뉠 때

switch 문의 활용 시나리오

• 2개 초과 10개 미만의 이산값을 판단해야 할 때

• 조건값이 비선형적이며 범위를 나누기 어려울 때

배열 조회(Array Lookup)의 활용 시나리오

• 10개 이상의 값을 판단해야 할 때

• 조건에 따른 결과가 일련의 작업이 아닌 단일 값일 때

2. 문자열 조작

문자열 연결

최신 브라우저는 이미 문자열 최적화를 수행했습니다. 문자열이 짧고(20자 미만) 개수가 적다면(1,000개 미만), 모든 브라우저에서 + 연산자를 사용하여 1ms 내에 처리가 가능합니다

따라서 push + join을 사용하여 문자열 연결을 최적화할 필요가 더 이상 없으며, 대부분의 상황에서는 직접 +를 사용하는 것이 좋습니다

문자열 트리밍(Trim)

ES5는 네이티브 trim을 제공합니다. 만약 환경에서 지원하지 않는다면 아래의 가장 빠른 trim 구현 방식을 사용할 수 있습니다:

function trim(text) {
    text = text.replace(/^\s+/, '');
    for (var i = text.length - 1; i >= 0; i--) {
        if (/\S/.test(text.charAt(i))) {
            text = text.substring(0, i + 1);
            break;
        }
    }

    return text;
}

또는 속도는 조금 느리지만 더 간단한 버전입니다:

function trim(text) {
    return text.replace(/^\s+/, '').replace(/\s+$/, '');
}

3. 데이터 접근

효율성을 보장하는 원칙은 다음과 같습니다:

• 빈번하게 접근해야 하는 값은 지역 변수에 캐싱합니다

예: arr.length, DOMNode List

• 스코프 체인을 단축합니다

with 외에도 try-catch의 catch 절은 스코프 체인을 길게 만듭니다(스코프 체인의 최상단에 예외 객체를 포함하는 객체가 추가됨). 따라서 성능 영향을 줄이기 위해 catch 블록 내부에 너무 많은 코드를 포함하지 않는 것이 좋습니다

참고 자료

• 《고성능 웹사이트 구축을 위한 고급 가이드(Even Faster Web Sites)》