함수 의 타성 불 러 오기 로 javascript 코드 성능 향상

javascript 코드 에 서 는 각 브 라 우 저 간 의 행동 차이 로 인해 함수 에 대량의 if 문 구 를 포함 하여 브 라 우 저 특성 을 검사 하여 서로 다른 브 라 우 저의 호환성 문 제 를 해결 합 니 다.예 를 들 어 우리 가 가장 흔히 볼 수 있 는 dom 노드 에 사건 의 함 수 를 추가 합 니 다.

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }
    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }
    else{
        element['on' + type] = fun;
    }
}

addEvent 함 수 를 호출 할 때마다 브 라 우 저가 지원 하 는 능력 을 검사 합 니 다. 먼저 addEventListener 방법 을 지원 하 는 지 확인 하고 지원 하지 않 으 면 attachEvent 방법 을 지원 하 는 지 확인 합 니 다. 지원 하지 않 으 면 dom 0 급 방법 으로 일 을 추가 합 니 다.이 과정 은 addEvent 함수 가 호출 될 때마다 한 번 씩 가 야 합 니 다. 사실은 브 라 우 저가 그 중의 한 가지 방법 을 지원 한다 면 그 는 계속 지원 할 것 입 니 다. 다른 분기 의 검 사 를 할 필요 가 없습니다. 즉, if 문 구 는 매번 실행 할 필요 가 없고 코드 가 더 빨리 실 행 될 수 있 습 니 다.
해결 방안 은 타성 불 러 오 는 기교 라 고 한다.
타성 불 러 오기 란 함수 의 if 분기 가 한 번 만 실행 되 고 그 후에 함 수 를 호출 할 때 지원 하 는 분기 코드 에 직접 들 어 가 는 것 입 니 다.타성 불 러 오 는 방식 은 두 가지 가 있 습 니 다. 첫 번 째 일 함 수 는 첫 번 째 호출 시 함수 자 체 를 2 차 처리 합 니 다. 이 함 수 는 분기 조건 에 맞 는 함수 로 덮어 씁 니 다. 그러면 원 함수 에 대한 호출 은 더 이상 실 행 된 분기 가 아 닙 니 다. 우 리 는 다음 방식 으로 타성 불 러 오 는 addEvent () 를 다시 쓸 수 있 습 니 다.

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
    return addEvent(type, element, fun);
}

이 타성 으로 불 러 온 addEvent () 에서 if 문장의 모든 지점 은 addEvent 변수 에 값 을 부여 하여 원 함 수 를 효과적으로 덮어 씁 니 다.마지막 단 계 는 바로 새로운 부 함 수 를 호출 한 것 이다.다음 에 addEvent () 를 호출 할 때 새 할당 함 수 를 직접 호출 합 니 다. 그러면 if 문 구 를 실행 하지 않 아 도 됩 니 다.
두 번 째 불활성 불 러 오 는 방식 은 함 수 를 설명 할 때 적당 한 함 수 를 지정 하 는 것 입 니 다.이렇게 하면 처음으로 함 수 를 호출 할 때 성능 을 잃 지 않 고 코드 를 불 러 올 때 만 약간의 성능 을 잃 을 수 있다.바로 이 사고방식 에 따라 다시 쓴 addEvent () 입 니 다.

var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

이 예 에서 사용 하 는 기 교 는 익명 의 자체 실행 함 수 를 만 드 는 것 입 니 다. 서로 다른 가 지 를 통 해 그 함 수 를 사용 해 야 하 는 지 확인 하 는 것 입 니 다. 실제 논 리 는 똑 같 습 니 다. 다른 점 은 함수 표현 식 (var 정의 함수 사용) 을 사용 하고 익명 함 수 를 추가 하 는 것 입 니 다. 또한 모든 가 지 는 정확 한 함 수 를 되 돌려 줍 니 다.변수 addEvent 에 즉시 값 을 부여 합 니 다.
불활성 불 러 오 는 함수 의 장점 은 if 분기 만 한 번 실행 합 니 다. 함수 가 실 행 될 때마다 if 분기 와 불필요 한 코드 를 실행 하 는 것 을 피 할 수 있 기 때문에 코드 성능 을 향상 시 켰 습 니 다. 그런 방식 이 더 적합 하 다 면 귀하 의 요구 에 따라 결정 해 야 합 니 다.