如何衡量/对比滚动事件中JS元素可见性判断函数的性能

我写了两个用于判断滚动时元素是否可见的布尔型函数，分别基于jQuery和原生JS，目标是对比两者的执行效率与性能影响。一开始觉得performance.now()直接在滚动事件里调用不合适，于是改用for循环反复调用函数的方式测量整体执行耗时。

测试结果 #

多次测试数据一致：原生JS版本5000次调用耗时约15ms，jQuery版本耗时约135ms。进一步排查发现，jQuery的offset()方法是主要性能瓶颈，将其替换为原生JS等效逻辑后，耗时可减少约100ms。

jQuery版本函数代码 #

function isVisible( scrollDistance, element ) {
    let wrapperOffset = $('#scroll-wrapper').offset().top;
    var elemOffset = element.offset().top;
    var top = elemOffset - wrapperOffset - wh;
    var btm = elemOffset - wrapperOffset + element.outerHeight();
    if ( scrollDistance > top && scrollDistance < btm ) {
        return true;
    }
}

原生JS版本函数代码 #

function isVisible( scrollDistance, element ) {
    let elem = element[0];
    var wrapperOffset = document.getElementById("scroll-wrapper").getBoundingClientRect().top + window.scrollY;
    var elemOffset = elem.getBoundingClientRect().top + window.scrollY;
    var top = elemOffset - wrapperOffset - wh;
    var btm = elemOffset - wrapperOffset + elem.offsetHeight;
    if ( scrollDistance > top && scrollDistance < btm ) {
        return true 
    }
}

测试循环代码 #

let start = performance.now(); // start time
for (x = 0; x < 5000; x++) {
    isVisible( 0, element );
    if ( x == 4999 ) {
        let stop = performance.now(); // end time
        console.log( stop-start )
    }
}

结论 #

从测试数据可以明确，原生JS版本的性能远优于jQuery版本。核心原因在于jQuery的offset()方法内部做了大量兼容性处理与封装逻辑，相比原生getBoundingClientRect()直接获取位置信息，额外开销显著。如果需要在高频触发的滚动事件中使用这类判断逻辑，优先选择原生JS实现能有效降低性能损耗。

内容的提问来源于stack exchange，提问作者Toki