I have a function that determines whether an element is visible on scroll, returning true/false.

I am trying to ascertain which of the following versions of the function is the most efficient / least impactful - one is in jQuery, and the other is vanilla JS.

I'm familiar with using performance.now() to measure execution time of a function but since this is repeatedly called on the scroll event I don't think that applies.

How best to go about this?

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;
    }

}

Vanilla 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 
    }

}

EDIT:

One solution that I've come up with for this is to measure the overall execution time of the functions being run repeatedly within a for loop.

Note: There are likely several factors impacting the accuracy of this.

I ran the following loop a few times, calling each function respectively and the results were surprisingly consistent.

For reference the Vanilla JS won out, with approximately ~15ms execution time over the 5000 calls. The jQuery version was a comparatively massive ~135ms.

Interestingly, I swapped out a couple of the lines in the jQuery function and discovered the jQuery offset() had by far the biggest impact, knocking off ~100ms when the line was switched with the vanilla JS equivalent.

The loop:

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 )

    }
}