Блог

Главная - Вопросы по программированию - оптимизация jQuery для IE

оптимизация jQuery для IE

#javascript #jquery #internet-explorer #jquery-selectors

#javascript #jquery #internet-explorer #jquery-селекторы

Вопрос:

У меня есть функция:

 function doBlamingItem($cell, showEditMark) {
    $cell.hover(function () {
        $cell.toggleClass('clickable-cell', showEditMark).toggleClass('editing-cell', !showEditMark);
    }, function() {
        $cell.removeClass('clickable-cell editing-cell');
} );};

в $(document).ready() Я применяю эту функцию для некоторых ячеек в моей таблице (~ 500), и когда я навожу на нее курсор мыши — в FF или Chrome все в порядке, но IE7-9 начинает отставать, и я не знаю, как это исправить: (

и код из $(document).готово():

 var i = firstRowOnPage();
while (table.GetRow(i) != null) {
    if (condition) {
        var row = table.GetRow(i);
        var elementInCellId = column.fieldName   '_'   rowKey;
        var $cell = $(row.cells[realIndex]).attr('id',elementInCellId);
        doBlamingItem($cell, true);
        setClickable(editInfo, $cell);
    }
i  ;
}

Я использую doBlamingItem для каждой ячейки, потому что для некоторых из них showEditMark=true, для других showEditMark= false

Комментарии:

1. Извините, я не могу помочь, но я хочу сказать, что ваш английский, по крайней мере в этом вопросе, не кажется ужасным 🙂

2. вы уверены, что не применяете 500 обработчиков событий к каждому элементу ?!

3. Пожалуйста, покажите код, который вызывает эту функцию.

4. имейте в виду, что IE, к сожалению, все еще немного медленнее, чем конкуренты. Кроме того, таблицы очень особенные в мире html-dom. этот тестовый пример jsperf является хорошим примером (среди множества других случаев в jsperf)

Ответ №1:

Ваш код в основном (1) находит эти ~ 500 элементов, (2) повторяет их, чтобы (3) назначить события наведения (состоящие из mouseenter и mouseleave). Вы слышали о делегированных мероприятиях?

Время настройки практически отсутствует (зарегистрировано только 2 обработчика событий вместо 1000). Никакие элементы не выделяются и не перемещаются.

 (function($, undefined){
  // if you want it global
  var showEditMark = true;
  // otherwise save that state to some element's data()

  $(function(){
    $(document.body).delegate('.your-table-selector td', {
      mousenter: function(e){
        $(this)
          .toggleClass('clickable-cell', showEditMark)
          .toggleClass('editing-cell', !showEditMark);
      },
      mouseleave: function(e){
        $(this).removeClass('clickable-cell editing-cell');
      }
    });
  });
})(jQuery);

Комментарии:

1. Я использую doBlamingItem для каждой ячейки, потому что для некоторых из них showEditMark=true , для других showEditMark=false

2. Вы все равно можете использовать один и тот же обработчик событий для всех из них, и этот обработчик событий должен будет проверить, является ли showEditMark true или false для данной ячейки.

3. Я изменил свой код на использование делегата и создал глобальный массив: window. flags[CellID] = showEditMark; но теперь моя страница начинает отставать больше, чем раньше: (

4. Я должен был бы увидеть код, чтобы сказать вам, что вы сделали неправильно… Мне интересно, почему вы используете глобальную переменную вместо $.fn.data() или простых классов, если на то пошло.

5. потому что с глобальным массивом этот код работает быстрее, чем $.data()

Ответ №2:

Спасибо всем, кто ответил на мой вопрос, но, как я понял, проблема была не в javascript… На моей странице большое DOM-дерево элементов и много CSS-стилей, поэтому у IE есть проблемы с его отображением

Метки: