Переключатель Javascript против если ... еще, если ... еще

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

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.

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

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

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

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

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

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

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

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

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

Есть ли разница в производительности в Javascript между оператором switch и if ... else if .... else?

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

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

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

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

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

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