자바 스크립트 스위치 vs. if… else if ... else

나는 몇 가지 질문이 있습니다.

1. switch명령문과 JavaScript 사이에 JavaScript의 성능 차이 가 if...else있습니까?
2. 그렇다면 왜?
3. 의 동작입니다 switch및 if...else브라우저에서 다른가? (FireFox, IE, Chrome, Opera, Safari)

이 질문을하는 이유 switch는 Firefox에서 약 1000 대의 사례가 있는 문장 에서 더 나은 성능을 얻는 것 같습니다 .

편집 불행히도 이것은 내 코드가 아닙니다 .Javascript가 컴파일 된 라이브러리에서 서버 측으로 생성되고 있으며 코드에 액세스 할 수 없습니다. 자바 스크립트를 생성하는 메소드를

CreateConditionals(string name, string arrayofvalues, string arrayofActions)

참고 arrayofvalues는 쉼표로 구분 된 목록입니다.

그것이 생산하는 것은

function [name] (value) {
  if (value == [value from array index x]) {
     [action from array index x]
  }
}

참고 : 여기서 [name]= 서버 측 함수에 전달 된 이름

이제 함수의 출력을 TextArea에 삽입하도록 변경하고 함수를 구문 분석하기위한 JavaScript 코드를 작성하여 case명령문 세트로 변환했습니다 .

마지막으로 함수를 실행하면 정상적으로 실행되지만 IE와 Firefox에서는 성능이 다릅니다.

일반적인 답변 :

1. 예, 보통입니다.
2. 자세한 정보는 여기를 참조하십시오
3. 예, 각기 다른 JS 처리 엔진이 있기 때문에 아래 사이트에서 테스트를 실행할 때 스위치는 항상 많은 반복에서 if, elseif를 수행했습니다.

시험장

때로는 둘 다 사용하지 않는 것이 좋습니다. 예를 들어, "디스패치"상황에서 Javascript를 사용하면 완전히 다른 방식으로 작업을 수행 할 수 있습니다.

function dispatch(funCode) {
  var map = {
    'explode': function() {
      prepExplosive();
      if (flammable()) issueWarning();
      doExplode();
    },

    'hibernate': function() {
      if (status() == 'sleeping') return;
      // ... I can't keep making this stuff up
    },
    // ...
  };

  var thisFun = map[funCode];
  if (thisFun) thisFun();
}

객체를 생성하여 다 방향 분기를 설정하면 많은 이점이 있습니다. 기능을 동적으로 추가 및 제거 할 수 있습니다. 데이터에서 디스패치 테이블을 작성할 수 있습니다. 프로그래밍 방식으로 검사 할 수 있습니다. 다른 함수로 핸들러를 빌드 할 수 있습니다.

"case"에 해당하는 함수 호출의 오버 헤드가 추가되었지만 특정 키에 대한 함수를 찾기위한 해시 조회의 이점 (많은 경우)입니다.

사이의 성능 차이 switch와 if...else if...else이다 작은, 그들은 기본적으로 같은 일을. 차이점을 만들 수있는 차이점 중 하나는 테스트 할 표현식이 한 번에 한 번 씩만 평가 switch된다는 것 if입니다. 표현식을 평가하는 데 비용이 많이 든다면 한 번 수행하는 것이 백 번 수행하는 것보다 빠릅니다.

이러한 명령 (및 모든 스크립트)의 구현 차이는 브라우저마다 약간 다릅니다. 다른 브라우저에서 동일한 코드에 대해 다소 큰 성능 차이를 보는 것이 일반적입니다.

모든 브라우저에서 모든 코드의 성능을 거의 테스트 할 수 없으므로 수행중인 작업에 가장 적합한 코드를 찾고 수행 방식을 최적화하는 대신 작업량을 줄여야합니다.

1. 차이가 있다면, 눈에 띄게 충분히 커지지 않을 것입니다.
2. 해당 없음
3. 아니요, 모두 동일하게 작동합니다.

기본적으로 코드를 가장 읽기 쉽게 만드는 것을 사용하십시오. 하나 또는 다른 구성이 더 깨끗하고 읽기 쉽고 유지 관리하기 쉬운 곳이 있습니다. JavaScript 코드에서 몇 나노초를 절약하는 것이 훨씬 더 중요합니다.

구문 이외에, 스위치가 만드는 나무를 사용하여 구현 될 수있다 O(log n)a가있는 동안, 경우 / 다른 로 구현 될 필요가 O(n)절차 적 접근 방식. 더 자주 그것들은 절차 상으로 처리되고 유일한 차이점은 구문이며, 10K 경우 if / else를 정적으로 입력하지 않는 한, 그것은 실제로 중요합니까?

Pointy의 답변 은 객체 리터럴을 switch또는 if/ 대신 사용할 수 있음을 나타냅니다 else. 나는이 접근법도 좋아하지만 답변의 코드 map는 dispatch함수가 호출 될 때마다 새로운 객체를 생성합니다 .

function dispatch(funCode) {
  var map = {
    'explode': function() {
      prepExplosive();
      if (flammable()) issueWarning();
      doExplode();
    },

    'hibernate': function() {
      if (status() == 'sleeping') return;
      // ... I can't keep making this stuff up
    },
    // ...
  };

  var thisFun = map[funCode];
  if (thisFun) thisFun();
}

map많은 수의 항목이 포함되어 있으면 상당한 오버 헤드가 발생할 수 있습니다. 액션 맵을 한 번만 설정 한 다음 매번 이미 생성 된 맵을 사용하는 것이 좋습니다.

var actions = {
    'explode': function() {
        prepExplosive();
        if( flammable() ) issueWarning();
        doExplode();
    },

    'hibernate': function() {
        if( status() == 'sleeping' ) return;
        // ... I can't keep making this stuff up
    },
    // ...
};

function dispatch( name ) {
    var action = actions[name];
    if( action ) action();
}

switch 문과 if ... else if .... else간에 Javascript의 성능 차이가 있습니까?

나는 그렇게 생각하지 않는다 . switch여러 if-else조건을 예방하고 싶다면 유용하고 짧다 .

스위치와 if ... else if ... else가 브라우저마다 다르게 작동합니까? (FireFox, IE, Chrome, Opera, Safari)

동작은 모든 브라우저에서 동일합니다 :)

1. 경우에 따라 워크 벤치는 약간의 차이가 발생할 수 있지만 처리 방법은 브라우저에 따라 다르므로 귀찮게 할 가치가 없습니다.
2. 처리 방법이 다르기 때문에
3. 동작이 달라지면 브라우저라고 부를 수 없습니다

스위치보다 일반적으로 빠르면 그렇지 않은 경우

http://jsperf.com/switch-if-else/46