Функция jQuery, содержащая if's и .each (), очень медленная в IE7 - PullRequest
Новая
       16

Функция jQuery, содержащая if's и .each (), очень медленная в IE7

3 голосов
/ 17 января 2012

Я в основном ищу элемент с определенными атрибутами данных, поэтому я перебираю все элементы с классом, который может иметь эти атрибуты данных.Я зациклился на функции jQuery each () и уже прочитал и понял, что в IE7 или любом другом IE он довольно медленный по сравнению с другими распространенными браузерами, такими как Firefox, Chrome или Safari.

Может быть, есть лучший способ найти эти элементы?! 

$('body').on('mouseenter', '.course', function(){
        var startday = $(this).data('start');
        var endday = $(this).data('end');
        var coursemonth = $(this).data('month');

        $('.dayname').each(function() {
            var thisday = $(this).data('date');
            var thismonth = $(this).data('month');

            if(thisday >= startday && thisday <= endday && thismonth == coursemonth)
            {
                $(this).addClass('red');
            }
        })
});

Контекст, через который я перехожу с помощью .each (), представляет собой список дней, фактически всего 30или сколько дней в месяце, и это на срок до 6 месяцев.Каждый день содержит дату в формате «mmdd», а также месяц в качестве атрибута данных.

            <div class="dayname we" data-date="0401" data-month="04">So</div>
            <div class="dayname " data-date="0402" data-month="04">Mo</div>
            <div class="dayname " data-date="0403" data-month="04">Di</div>
            <div class="dayname " data-date="0404" data-month="04">Mi</div>
            <div class="dayname " data-date="0405" data-month="04">Do</div>

Обновление: К сожалению, все советы и подсказки по повышению производительности селекторов и элементов в каждом не удаются.Но я все еще надеюсь, что смогу заставить это работать.У меня нет правильной идеи, но у меня почему-то есть ощущение, что может быть что-то вроде find () и селектора, который может различаться между старшими и младшими числами как (как вы можете видеть в разметке).) мои атрибуты данных являются просто числами.Есть ли выход со сравнением в селекторе?Таким образом, я мог бы опустить .each () и, надеюсь, с этим справиться с проблемой производительности.

Ответы [ 2 ]

3 голосов
/ 17 января 2012

Вы можете оптимизировать свой код, чтобы повысить производительность, сократив количество вызовов до метода data, а также создав экземпляр объекта jQuery из элемента this. 

var $dayName = $('.dayname');
$('body').on('mouseenter', '.course', function(){
        var dataObj = $(this).data();

        $dayName.each(function() {
            var $this = $(this);
            var innerDataObj = $this.data();

            if(innerDataObj.date >= dataObj.start 
               && innerDataObj.date <= dataObj.end 
               && innerDataObj.month == dataObj.month)
            {
                $this.addClass('red');
            }
        })
});
1 голос
/ 17 января 2012
  1. Вы можете сначала попытаться получить ссылку на $(this) в верхней части вашей функции и использовать ее повторно.Повторный вызов $(this) оказывает небольшое влияние на производительность.
  2. Можете ли вы ограничить начальную область селектора чем-то более узким, чем body?

  3. знаете, будут ли классы .course всегда применяться к определенному элементу DOM (например, теги <p>)?Если вы, кажется, что поиск селектора IE7 быстрее, когда вы включаете имя тега впереди - например, p.course вместо просто .course.Ссылка на результаты производительности здесь . 

    $('body').on('mouseenter', '.course', function(){
    var thisObj = $(this),
        startday = thisObj.data('start'),
        endday = thisObj.data('end'),
        coursemonth = thisObj.data('month');

    $('.dayname').each(function() {
        var thisOtherObj = $(this),
            thisday = thisOtherObj.data('date'),
            thismonth = thisOtherObj.data('month');

        if(thisday >= startday && thisday <= endday && thismonth == coursemonth)
        {
            thisOtherObj.addClass('red');
        }
    })

    });

Надеюсь, это поможет!

...