Przełącznik JavaScript vs. if… else if… else

Chłopaki mam kilka pytań:

1. Czy istnieje różnica wydajności w JavaScript między switchinstrukcją a instrukcją if...else?
2. Jeśli tak, dlaczego?
3. Czy zachowanie switchi jest if...elseróżne w różnych przeglądarkach? (FireFox, IE, Chrome, Opera, Safari)

Powodem zadawania tego pytania jest to, że wydaje mi się, że osiągam lepszą wydajność na switchwyciągu z około 1000 przypadków w przeglądarce Firefox.

Edytowane Niestety to nie jest mój kod, Javascript jest tworzony na serwerze poza skompilowaną biblioteką i nie mam dostępu do kodu. Wywoływana jest metoda, która tworzy skrypt javascript

CreateConditionals(string name, string arrayofvalues, string arrayofActions)

uwaga arrayofvaluesjest listą oddzieloną przecinkami.

to, co produkuje

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

Uwaga: gdzie [name]= nazwa przekazana do funkcji po stronie serwera

Teraz zmieniłem dane wyjściowe funkcji, która ma być wstawiona do TextArea, napisałem kod JavaScript do analizy funkcji i przekonwertowałem go na zestaw caseinstrukcji.

wreszcie uruchamiam tę funkcję i działa dobrze, ale wydajność różni się w IE i Firefox.

Odpowiedzi ogólnie:

1. Tak, zwykle.
2. Zobacz więcej informacji tutaj
3. Tak, ponieważ każdy z nich ma inny silnik przetwarzania JS, jednak podczas uruchamiania testu na poniższej stronie przełącznik zawsze wykonywał if, elseif na dużej liczbie iteracji.

Strona testowa

Czasami lepiej nie używać żadnego. Na przykład w sytuacji „wysyłki” Javascript pozwala robić rzeczy w zupełnie inny sposób:

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();
}

Konfigurowanie rozgałęzień wielotorowych poprzez utworzenie obiektu ma wiele zalet. Możesz dynamicznie dodawać i usuwać funkcje. Możesz utworzyć tabelę wysyłki na podstawie danych. Możesz to sprawdzić programowo. Możesz zbudować programy obsługi z innymi funkcjami.

Istnieje dodatkowy narzut wywołania funkcji, aby uzyskać odpowiednik „przypadku”, ale zaleta (gdy jest wiele przypadków) wyszukiwania skrótu w celu znalezienia funkcji dla określonego klucza.

Różnica w wydajności między a switchi if...else if...elsejest niewielka, w zasadzie wykonują tę samą pracę. Jedyną różnicą między nimi, która może mieć znaczenie, jest to, że wyrażenie do testowania jest oceniane tylko raz na jakiś switchczas, jest oceniane dla każdego if. Jeśli oszacowanie wyrażenia jest kosztowne, zrobienie tego raz jest oczywiście szybsze niż zrobienie tego sto razy.

Różnica w implementacji tych poleceń (i ogólnie wszystkich skryptów) różni się znacznie między przeglądarkami. Często spotyka się dość duże różnice w wydajności tego samego kodu w różnych przeglądarkach.

Ponieważ trudno jest przetestować wydajność całego kodu we wszystkich przeglądarkach, powinieneś wybrać kod, który najlepiej pasuje do tego, co robisz, i spróbować zmniejszyć ilość wykonywanej pracy, zamiast optymalizować sposób jej wykonywania.

1. Jeśli jest różnica, nigdy nie będzie wystarczająco duża, aby można ją było zauważyć.
2. Nie dotyczy
3. Nie, wszystkie działają identycznie.

Zasadniczo używaj tego, co sprawia, że ​​kod jest najbardziej czytelny. Zdecydowanie są miejsca, w których jedna lub druga konstrukcja zapewnia czystszą, czytelniejszą i łatwiejszą w utrzymaniu. Jest to o wiele ważniejsze niż zaoszczędzenie kilku nanosekund w kodzie JavaScript.

Inaczej niż składnia, przełącznik można zaimplementować za pomocą drzewa, które go tworzy O(log n), podczas gdy if / else musi zostać zaimplementowane z O(n)podejściem proceduralnym. Częściej oba są przetwarzane proceduralnie, a jedyną różnicą jest składnia, a ponadto czy to naprawdę ma znaczenie - chyba że wpisujesz statycznie 10 tys. Przypadków if / else?

Odpowiedź Pointy'ego sugeruje użycie dosłownego obiektu jako alternatywy dla switchlub if/ else. To podejście też mi się podoba, ale kod w odpowiedzi tworzy nowy mapobiekt za każdym razem, gdy dispatchfunkcja jest wywoływana:

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();
}

Jeśli mapzawiera dużą liczbę wpisów, może to spowodować znaczne obciążenie. Mapę akcji lepiej ustawić tylko raz, a następnie za każdym razem korzystać z już utworzonej mapy, na przykład:

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();
}

Czy istnieje różnica w działaniu JavaScript między instrukcją switch a instrukcją if ... else if .... else?

Nie sądzę, switchjest przydatne / krótkie, jeśli chcesz zapobiec wielu if-elsewarunkom.

Czy zachowanie przełącznika i if ... else if ... else jest inne w różnych przeglądarkach? (FireFox, IE, Chrome, Opera, Safari)

Zachowanie jest takie samo we wszystkich przeglądarkach :)

1. Środowisko pracy może w niektórych przypadkach powodować bardzo małe różnice, ale sposób przetwarzania i tak zależy od przeglądarki, więc nie warto się tym przejmować
2. Z powodu różnych sposobów przetwarzania
3. Nie możesz nazwać tego przeglądarką, jeśli zachowanie i tak byłoby inne

Okazuje się, że jeśli - inaczej, generalnie szybciej niż przełącznik

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