Производительность Jquery с операторами if else

Question

В настоящее время я делаю все возможное, чтобы изучить jQuery и создал код ниже. Все, что он делает, это удаляет и изменяет класс в определенных точках на странице. Мой вопрос заключается в том, насколько сильно этот код повлияет на производительность, поскольку я осознаю, что при каждой прокрутке мыши выполняются операторы или это незначительно.

Я ценю любую предложенную помощь.

Мой код:

function removeActive() {
    $('#vtop ul li').each(function () {
        $(this).children('a').removeClass('active');
    });
}
$(window).scroll(function () {
    var pos = $(window).scrollTop();
    if (pos <= '521') {
        removeActive();
        $('#m-intro a').addClass('active');
    } else if (pos >= '1108' && pos <= '1626') {
        removeActive();
        $('#m-nosales a').addClass('active');
    } else if (pos >= '2220' && pos <= '2742') {
        removeActive();
        $('#m-crates a').addClass('active');
    } else if (pos >= '3332' && pos <= '3860') {
        removeActive();
        $('#m-packages a').addClass('active');
    } else if (pos >= '4444' && pos <= '4966') {
        removeActive();
        $('#m-signup a').addClass('active');
    } else if (pos >= '5556') {
        removeActive();
        $('#m-contact a').addClass('active');
    }
    $('#divd').text(pos);
});

Answer 1

Не знаю о производительности, но что-то вроде этого легче читать. Не пробовал, но вы поняли идею ... Другой вариант - вместо этого использовать оператор switch.

var elms = {
    intro: { min: 0, max: 521 },
    nosales: { min: 1108, max: 1626 },
    crates: { min: 2220, max: 2742 },
    packages: { min: 3332, max: 3860 },
    signup: { min: 4444, max: 4966 },
    contact: { min: 5556, max: $(window).height() }
};
$(window).scroll(function () {
    var pos = $(window).scrollTop();
    for (var el in elms) {
        var min = elms[el].min,
            max = elms[el].max;
        if (pos >= min && pos <= max) {
            $('#vtop ul li > a').removeClass('active');
            $('#m-' + elms[el]).addClass('active');
            break;
        }
    }
});

Answer 2

Я бы добавил состояние, которое гарантирует, что вы не проверяете, когда вам это не нужно. В противном случае каждый пиксель, попадающий в одну из ваших областей, очистится и установит активное состояние. Это дороже, чем делать простые проверки границ. Кроме того, сначала выполните сравнение состояний, поскольку оно, скорее всего, будет ложным.

function removeActive() {
    $('#vtop ul li > a').removeClass('active');
}

var active = '';
$(window).scroll(function () {
    var pos = $(window).scrollTop();
    if (active != 'intro' && pos <= '521') {
        removeActive();
        active = 'intro';
        $('#m-intro a').addClass('active');
    } else if (active != 'nosales' && pos >= '1108' && pos <= '1626') {
        removeActive();
        active = 'nosales';
        $('#m-nosales a').addClass('active');
    } else if (active != 'crates' && pos >= '2220' && pos <= '2742') {
        removeActive();
        active = 'crates';
        $('#m-crates a').addClass('active');
    } else if (active != 'packages' && pos >= '3332' && pos <= '3860') {
        removeActive();
        active = 'packages';
        $('#m-packages a').addClass('active');
    } else if (active != 'signup' && pos >= '4444' && pos <= '4966') {
        removeActive();
        active = 'signup';
        $('#m-signup a').addClass('active');
    } else if (active != 'contact' && pos >= '5556') {
        removeActive();
        active = 'contact';
        $('#m-contact a').addClass('active');
    } else if (active != '') {
        active = '';
    }
    $('#divd').text(pos);
});

Вы также можете упростить курс:

var active = '';
var prevActive = '';

$(window).scroll(function () {
    var pos = $(window).scrollTop();
    if (pos <= 521) {
        active = 'intro';
    } else if (pos <= 1107) {
        active = '';
    } else if (pos <= 1626) {
        active = 'nosales';
    } else if (pos <= 2219) {
        active = '';
    } else if (pos <= 2742) {
        active = 'crates';
    } else if (pos <= 3331) {
        active = '';
    } else if (pos <= 3860) {
        active = 'packages';
    } else if (pos <= 4443) {
        active = '';
    } else if (pos <= 4966) {
        active = 'signup';
    } else if (pos <= 5555) {
        active = '';
    } else {
        active = 'contact';
    }

    if(active != prevActive) {
        $('#vtop ul li > a').removeClass('active');
        if(active != '') {
            $('#m-'+active+' a').addClass('active');
        }
        prevActive = active;
    }

    $('#divd').text(pos);
});

Я взломал пример, который делает похожую вещь. Он не имеет такой же структуры HTML, но показывает поведение прокрутки:

http://jsfiddle.net/z7YHX/

Answer 3

$('#vtop ul li').each(function(){
    $(this).children('a').removeClass('active');
});

можно упростить до

$('#vtop ul li > a').removeClass('active');

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

Answer 4

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

var bands = {
    intro: [0,521], 
    nosales:[1108,1626], 
    crates:[2220,2742], 
    packages:[3332,3860],
    signup: [4444, 4966],
    contact: [5556, 99999]};

var win = $(window); //Cache for speed

win.scroll(function () {
    var pos = win.scrollTop();

    for (var key in bands) {
        var band = bands[key];
        if (pos >= band[0] && pos <= band[1]) {
            $('#vtop ul li > a').removeClass('active');
            $('#m-' + key + ' a').addClass('active');
            break;
        }
    }
});