Оптимизация Javascript для Internet Explorer

Хорошо известно, что JavaScript-движки Internet Explorer отстают с точки зрения производительности, особенно IE 8 и старше, по сравнению с Chrome, Safari (Webkit) или Firefox (Mozilla).

При разработке веб-приложения со значительной функциональностью javascript IE выполняет намного хуже других.

Существуют ли какие-либо методы, которые могли бы помочь улучшить ваш код javascript, чтобы разделить между хорошими исполнителями (не IE) и плохим исполнителем (IE) не так широко?

ОТВЕТЫ

Ответ 1

Одним из распространенных способов оптимизации производительности является кэширование значения "max" для циклов.

Итак, скажем, вам нужно перебирать массив с именем sampleArray. Вы можете оптимизировать приведенный ниже оператор:

var sampleArray = [3, 10, 12, 5, 9];

for(var i = 0; i < sampleArray.length; i++){
   var currentElement = sampleArray[i];
  // so something wit element
}

изменив его как:

for(var i = 0, max = sampleArray.length; i < max; i++){
       var currentElement = sampleArray[i];
      // so something wit element
}

Это показало, что во всех браузерах наблюдается значительное увеличение производительности. В частности, IE7 доказал, что получает 190-кратное увеличение производительности с использованием этого шаблона (из Высокопроизводительный Javascript)

Ответ 2

Еще несколько общих решений:

Кэш часто используемых узлов DOM, не пересчитывайте их снова в той же функции. Например. вместо

$(id).parentNode.something();
$(id).parentNode.somethingOther();

использование

var e = $(id).parentNode;
e.something();
e.somethingOther();

Кэш часто используемых объектов из внешней области. Например. вместо

if (this.options.type == 'a') {
    // ...
} else if (this.options.type == 'b') {
    // ...
}

использование

var type = this.options.type;
if (type == 'a') {
    // ...
} else if (type == 'b') {
    // ...
}

Это также окажет положительное влияние на размер кода до и после минимизации.

Ответ 4

а. Одним из способов повысить производительность в старых версиях IE было бы использование RAW JavaScript для создания элементов DOM вместо jQuery.

example -

(function () {
  var rosterContainer = document.getElementByID("roster");
  var memberContainer = document.createElement("div");

  $(memberContainer).addClass("one_fourth alpha hentry")
                    .attr("id", mName.replace(/\s+/g," "))
                    .appendTo($(rosterContainer));
})();

б. Вы также можете повторно настроить свой пользовательский интерфейс (UX) для браузеров IE.

Пример. Мой сайт использует тяжелые JS/jquery-плагины для загрузки больших фонов и показывает их как слайд-шоу с альфа-подростками. Но для моих пользователей IE я не загружаю JS или плагин или фоновые изображения - я просто показываю статическую подпись bg.

вы можете использовать таких загрузчиков, как yepnope.js, для загрузки оптимизированного JS для IE

с. Убедитесь, что пользовательский интерфейс вашего сайта полностью работоспособен без JavaScript. Это всегда хорошее место для начала.