返回顶部效果，性能问题

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 interval
window.addEventListener('scroll', function(){
    if(interval){
        clearTimeout(interval)
    }
    interval = setTimeout(function(){
        // 这里写主要的业务逻辑
        // 这样所有的复杂操作都会延迟300毫秒执行,并且不会因为多次滚动导致反复触发
    }, 300)
})

之前由于概念没弄清楚,所以写了个错误的示范,虽然上面的示范也能执行,但是下面的示范也许会更适合当前的场景,感觉小明同学指出

var frequency = 300 // 300毫秒执行一次
var interval
var last
window.addEventListener('scroll', function(){
    var now = Date.now()
    if(last && last < now + frequency){
        // 保证滚动停下之后的300ms还会再执行一次
        if(interval){
            clearTimeout(interval)
            
        }
        interval = setTimeout(function(){
            last = now
            doSomething()
        }, frequency)
    }else{
        last = now
        doSometing()
    }
})
function doSomething(){}

当然上面只是一个简单的实现,网上有很多关于Debounce(防抖),Throttle(节流)的封装,楼主可以自行参考与学习

Answer 2

如果怕有性能问题，可以多加一层判断。本来滚动就会产生重绘，影响不会很大

if(top >= 300 && ele.style.display != 'block'){
    ele.style.display = 'block'
}else if(top < 300){
    ele.style.display = 'none'
}