返回顶部效果，性能问题

Question

window.onscroll = function(){    var top = document.documentElement.scrollTop || document.body.scrollTop;    if(top >= 300){
        ele.style.display = 'block'
    }else{
        ele.style.display = 'none'
    }
}

当滚动300px后，display为block;以后鼠标向下滑动都会运行ele.style.display = 'block',
虽然当时的ele已经为block，但是这样持续运行这句 会不会持续重绘影响性能。

Answer 1

滚动的时候,会一直触发滚动的回调函数在回调函数中使用如果逻辑简单还好,如果涉及到强逻辑建议加上节流函数来控制,简单的实现方式如下var&nbsp;intervalwindow.addEventListener('scroll',&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;if(interval){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(interval) &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;interval&nbsp;=&nbsp;setTimeout(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这里写主要的业务逻辑 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这样所有的复杂操作都会延迟300毫秒执行,并且不会因为多次滚动导致反复触发 &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;300) })之前由于概念没弄清楚,所以写了个错误的示范,虽然上面的示范也能执行,但是下面的示范也许会更适合当前的场景,感觉小明同学指出var&nbsp;frequency&nbsp;=&nbsp;300&nbsp;//&nbsp;300毫秒执行一次var&nbsp;intervalvar&nbsp;lastwindow.addEventListener('scroll',&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;now&nbsp;=&nbsp;Date.now()&nbsp;&nbsp;&nbsp;&nbsp; if(last&nbsp;&&&nbsp;last&nbsp;<&nbsp;now&nbsp;+&nbsp;frequency){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;保证滚动停下之后的300ms还会再执行一次 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(interval){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(interval) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval&nbsp;=&nbsp;setTimeout(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;last&nbsp;=&nbsp;now &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doSomething() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;frequency) &nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;last&nbsp;=&nbsp;now &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doSometing() &nbsp;&nbsp;&nbsp;&nbsp;} })function&nbsp;doSomething(){}当然上面只是一个简单的实现,网上有很多关于Debounce(防抖),Throttle(节流)的封装,楼主可以自行参考与学习