Переключатель Javascript против если ... еще, если ... еще - PullRequest
121 голосов
/ 27 мая 2010

Ребята, у меня есть пара вопросов:

  1. Есть ли разница в производительности JavaScript между оператором switch и if...else?
  2. Если так, то почему?
  3. Отличается ли поведение switch и if...else в разных браузерах? (FireFox, IE, Chrome, Opera, Safari)

Причина, по которой я задаю этот вопрос, заключается в том, что мне кажется, что я получаю более высокую производительность для оператора switch с примерно 1000-ю случаями в Firefox.


Отредактировано К сожалению, это не мой код, Javascript создается на стороне сервера из скомпилированной библиотеки, и у меня нет доступа к коду. Метод, который производит JavaScript, называется

CreateConditionals(string name, string arrayofvalues, string arrayofActions)

note arrayofvalues - список через запятую.

что он производит, это

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

Примечание: где [name] = имя, переданное в функцию сервера

Теперь я изменил вывод функции, которая будет вставлена ​​в TextArea, написал некоторый код JavaScript для анализа функции и преобразовал его в набор операторов case.

наконец-то я запускаю функцию, и она работает нормально, но производительность в IE и Firefox различается.

Ответы [ 9 ]

96 голосов
/ 27 мая 2010

Ответы в общих чертах:

  1. Да, обычно.
  2. Подробнее здесь
  3. Да, потому что у каждого свой JSОднако процессор обработки при выполнении теста на сайте, указанном ниже, коммутатор всегда выполнял if, в противном случае на большом количестве итераций.

Тестовый сайт

57 голосов
/ 27 мая 2010

Иногда лучше не использовать ни того, ни другого. Например, в ситуации «отправки» 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", но преимущество (когда есть много случаев) поиска хеша для поиска функции для конкретной клавиши.

17 голосов
/ 27 мая 2010

Разница в производительности между switch и if...else if...else невелика, в основном они выполняют одну и ту же работу. Одно из различий между ними, которое может иметь значение, состоит в том, что проверяемое выражение оценивается только один раз в switch, в то время как оно оценивается для каждого if. Если вычисление выражения стоит дорого, то, конечно, сделать это один раз быстрее, чем сто раз.

Разница в реализации этих команд (и всего сценария в целом) довольно сильно отличается в разных браузерах. Часто встречаются большие различия в производительности одного и того же кода в разных браузерах.

Поскольку вы вряд ли сможете протестировать производительность всего кода во всех браузерах, вам следует выбрать код, который лучше всего подходит для вашей работы, и попытаться уменьшить объем выполненной работы, а не оптимизировать ее работу.

6 голосов
/ 27 мая 2010

Кроме синтаксиса, переключатель может быть реализован с использованием дерева, которое делает его O(log n), тогда как , если / иначе , должно быть реализовано с процедурным подходом O(n). Чаще всего они обрабатываются процедурно, и единственное различие заключается в синтаксисе, и, кроме того, это действительно имеет значение - разве вы в любом случае статически набираете 10 000 случаев if / else?

6 голосов
/ 27 мая 2010
  1. Если есть разница, она никогда не будет достаточно большой, чтобы ее можно было заметить.
  2. N / A
  3. Нет, все они работают одинаково.

В основном используйте все, что делает код наиболее читабельным. Определенно есть места, где та или иная конструкция делает ее более чистой, удобочитаемой и удобной в обслуживании. Это гораздо важнее, чем сохранение нескольких наносекунд в коде JavaScript.

3 голосов
/ 26 июля 2017

Ответ Пойнти предполагает использование литерала объекта в качестве альтернативы 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();
}
3 голосов
/ 27 мая 2010

Есть ли разница в производительности Javascript между оператором переключения и если ... еще, если .... еще?

Я так не думаю, switch полезно / коротко, если вы хотите предотвратить несколько if-else условий.

Поведение переключателя и если ... еще если ... еще другой браузеры? (FireFox, IE, Chrome, Opera, Safari)

Поведение одинаково во всех браузерах:)

1 голос
/ 05 сентября 2013

Оказывается, если-иначе, если вообще быстрее, чем переключатель

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

1 голос
/ 27 мая 2010
  1. Верстак может привести к некоторым очень небольшим различиям в некоторых случаях, но способ обработки в любом случае зависит от браузера, поэтому не стоит беспокоиться
  2. Из-за разных способов обработки
  3. Вы не можете назвать это браузером, если поведение все равно будет другим
...