更新滚动和其他滚动事件的哈希 - 性能问题答案

【问题标题】：Update hash on scroll and other scroll events - performance issues更新滚动和其他滚动事件的哈希 - 性能问题
【发布时间】：2016-04-18 15:51:53
【问题描述】：

我将多个事件绑定到一个滚动事件，当我尝试使用 window.location.hash = "hash"; 更新哈希时遇到性能问题.屏幕闪烁，页面随机跳转。 如何优化此代码以提高性能并防止页面闪烁和跳跃？

我正在使用下面的自定义编写的 jQuery 滚动事件，当您滚动一定距离时，它会更新页面的各个部分（我为每个部分创建了变量，这些变量是使用 .outerHeight 的部分）。一切都包含在 $(window).on('load resize', function(){} 中，以确保在计算高度之前窗口已完全加载。

自定义编写的jquery代码如下：

$(window).on('load resize', function(){

        $(window).on('scroll', function(e){
            var scrollLength = $(window).scrollTop();
            var opacity = 0;
            if( scrollLength <= fadeStart ){
                opacity = 1;
            } 
            if (scrollLength <= fadeUntil ){
                opacity = 1- scrollLength/fadeUntil;
            }

            heroContent.css({
                'opacity' : opacity,
            });

            if (scrollLength < scroll1){
                $('.fixed-nav').removeClass('fixed'); 
            }
            if (scrollLength > scroll1 && scrollLength < scroll2){
                $('.fixed-nav').addClass('fixed');
                chapterNum.text('01');
                window.location.hash = "story1";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:first-of-type').addClass('active');
            } 
            if (scrollLength > scroll2 && scrollLength < scroll3) {
                chapterNum.text('02');
                window.location.hash = "story2";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(2)').addClass('active');
            } 
            if (scrollLength > scroll3 && scrollLength < scroll4) {
                chapterNum.text('03');
                window.location.hash = "story3";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(3)').addClass('active');
            }
            if (scrollLength > scroll4 && scrollLength < scroll5) {
                chapterNum.text('04');
                window.location.hash = "story4";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(4)').addClass('active');
            }
            if (scrollLength > scroll5) {
                chapterNum.text('05');
                window.location.hash = "team";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(5)').addClass('active');
            }

        });
    });

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

几点建议：

您在每次调整大小时都设置了一个新的事件侦听器。
每当您编写$("..") 时，jQuery 都会在 DOM 树中搜索您想要定位的元素。这是一个“昂贵”的行动。尝试跟踪在滚动时执行的方法之外需要更改的元素。
使用else if 防止对所有if 语句进行评估。

例如：

if (scrollLength < scroll1){ /* .. */ }
if (scrollLength > scroll1 && scrollLength < scroll2) { /* .. */ }

也可以写成：

if (scrollLength < scroll1){ /* .. */ }
else if (scrollLength < scroll2) { /* .. */ }

【讨论】：

【解决方案2】：

我认为主要问题是$(window).on('scroll',...) 函数嵌套在内部 $(window).on('resize',...) 函数中。调整窗口大小时，每次都会对窗口应用额外的绑定！您可以使用.off()，但我认为将它们分开会更好：

$(window).on('load resize', function(){
  $(window).scroll();
});

$(window).on('scroll',...);

至于更新哈希，请使用replaceState（ref；这在 IE8/9 中不起作用）

window.history.replaceState({}, '', '#story3');

【讨论】：