Commutateur Javascript vs si… sinon si… autre

Les gars, j'ai quelques questions:

1. Existe-t-il une différence de performances en JavaScript entre une switchinstruction et un if...else?
2. Si oui, pourquoi?
3. Le comportement switchet le comportement des if...elsenavigateurs sont-ils différents? (FireFox, IE, Chrome, Opera, Safari)

La raison pour laquelle je pose cette question est qu'il semble que j'obtiens de meilleures performances sur une switchdéclaration avec environ 1000 cas dans Firefox.

Edité Malheureusement ce n'est pas mon code, le Javascript est en cours de production depuis une bibliothèque compilée et je n'ai pas accès au code. La méthode qui produit le javascript est appelée

CreateConditionals(string name, string arrayofvalues, string arrayofActions)

note arrayofvaluesest une liste séparée par des virgules.

ce qu'il produit est

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

Remarque: où [name]= le nom passé dans la fonction côté serveur

Maintenant, j'ai changé la sortie de la fonction à insérer dans un TextArea, j'ai écrit du code JavaScript pour analyser la fonction et je l'ai converti en un ensemble d' caseinstructions.

enfin je lance la fonction et elle fonctionne bien mais les performances diffèrent dans IE et Firefox.

Répondre en général:

1. Oui, généralement.
2. Voir plus d'informations ici
3. Oui, car chacun a un moteur de traitement JS différent, cependant, lors de l'exécution d'un test sur le site ci-dessous, le commutateur a toujours effectué le if, elseif sur un grand nombre d'itérations.

Site de test

Parfois, il vaut mieux n'utiliser ni l'un ni l'autre. Par exemple, dans une situation de «répartition», Javascript vous permet de faire les choses d'une manière complètement différente:

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

La configuration du branchement multi-directionnel en créant un objet présente de nombreux avantages. Vous pouvez ajouter et supprimer des fonctionnalités de manière dynamique. Vous pouvez créer la table d'expédition à partir des données. Vous pouvez l'examiner par programme. Vous pouvez créer les gestionnaires avec d'autres fonctions.

Il y a la surcharge supplémentaire d'un appel de fonction pour obtenir l'équivalent d'un "cas", mais l'avantage (quand il y a beaucoup de cas) d'une recherche de hachage pour trouver la fonction pour une touche particulière.

La différence de performance entre a switchet if...else if...elseest faible, ils font essentiellement le même travail. Une différence entre eux qui peut faire une différence est que l'expression à tester n'est évaluée qu'une fois de temps en switchtemps, elle est évaluée pour chacun if. S'il est coûteux d'évaluer l'expression, le faire une fois est bien sûr plus rapide que de le faire cent fois.

La différence d'implémentation de ces commandes (et de tous les scripts en général) diffère un peu entre les navigateurs. Il est courant de voir des différences de performances assez importantes pour le même code dans différents navigateurs.

Comme vous pouvez difficilement tester les performances de tout le code dans tous les navigateurs, vous devez choisir le code qui correspond le mieux à ce que vous faites et essayer de réduire la quantité de travail effectuée plutôt que d'optimiser la façon dont cela est fait.

1. S'il y a une différence, elle ne sera jamais assez grande pour être remarquée.
2. N / A
3. Non, ils fonctionnent tous de la même manière.

En gros, utilisez ce qui rend le code le plus lisible. Il y a certainement des endroits où l'une ou l'autre des constructions est plus propre, plus lisible et plus maintenable. C'est bien plus important que d'économiser peut-être quelques nanosecondes en code JavaScript.

Autre que la syntaxe, un commutateur peut être implémenté en utilisant un arbre qui le fait O(log n), tandis qu'un if / else doit être implémenté avec une O(n)approche procédurale. Le plus souvent, ils sont tous deux traités de manière procédurale et la seule différence est la syntaxe, et de plus, est-ce vraiment important - à moins que vous ne tapiez statiquement 10k cas de if / else de toute façon?

La réponse de Pointy suggère l'utilisation d'un objet littéral comme alternative à switchou if/ else. J'aime aussi cette approche, mais le code de la réponse crée un nouvel mapobjet à chaque fois que la dispatchfonction est appelée:

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

Si mapcontient un grand nombre d'entrées, cela peut créer une surcharge importante. Il est préférable de ne configurer la carte d'action qu'une seule fois, puis d'utiliser la carte déjà créée à chaque fois, par exemple:

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

Y a-t-il une différence de préformance en Javascript entre une instruction switch et une if ... else if .... else?

Je ne pense pas, switchc'est utile / court si vous voulez éviter plusieurs if-elseconditions.

Le comportement de switch et if ... else if ... else est-il différent d'un navigateur à l'autre? (FireFox, IE, Chrome, Opera, Safari)

Le comportement est le même dans tous les navigateurs :)

1. Workbenching peut entraîner de très petites différences dans certains cas, mais le mode de traitement dépend de toute façon du navigateur, donc cela ne vaut pas la peine d'être dérangé
2. En raison de différentes méthodes de traitement
3. Vous ne pouvez pas appeler cela un navigateur si le comportement serait différent de toute façon

Il s'avère que if-else est généralement plus rapide que switch

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