javascript - Jquery滚动事件导致性能问题

Question

我正在尝试使用浏览器滚动事件根据用户滚动的量放置一个 html block 。该代码可以工作，但它导致了巨大的性能问题，基本上迫使我的浏览器卡住。

任何有关原因以及我可以采取哪些措施来解决此问题的见解将不胜感激。

<script type="text/javascript">

$('#content').scroll(function () {
    var scroll = $('#content').scrollTop();
    var $controls = $(".controls").clone();
    if (scroll > 200) {
        $(".controls").remove();
        $('#header').append($controls);
    }
    else {
        $(".controls").remove();
        $('.banner').append($controls);
    }
});

</script>

Answer 1

首先，发现 DOM 中的元素是一项昂贵的事件，因此缓存您的 jQuery 对象。

其次，.append() 会移动元素，因此 .clone() 和 remove() 应该是不必要的。

这给出:

var $$ = {//cache of jQuery objects
    content: $('#content'),
    controls: $(".controls"),
    header: $("#header"),
    banner: $('.banner')
};
$('#content').scroll(function() {
    $controls.appendTo(($$.content.scrollTop() > 200) ? $$.header : $$.banner);
});

现在，您可以努力减少调用处理程序的频率，这可以通过以下方式实现:

var $$ = {//cache of jQuery objects
    content: $('#content'),
    controls: $(".controls"),
    header: $("#header"),
    banner: $('.banner')
};

var scrollHandling = {
    allow: true,
    reallow: function() {
        scrollHandling.allow = true;
    },
    delay: 50 //(milliseconds) adjust to the highest acceptable value
};

$('#content').scroll(function() {
    if(scrollHandling.allow) {
        $controls.appendTo(($$.content.scrollTop() > 200) ? $$.header : $$.banner);
        scrollHandling.allow = false;
        setTimeout(scrollHandling.reallow, scrollHandling.delay);
    }
});