CODEWITHSUNDEEP
javascriptjquery
Toki
Toki

Reputation: 587

How best to measure/compare scroll event function performance JS

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 )

    }
}

Upvotes: 1

Views: 76

Answers (1)

Mina
Mina

Reputation: 17224

You can use Intersection Observer which is better than both in performance for most cases and it is much easier to use, it can determine if the element in the viewport ( visible on the screen ) or not, Also, you can have more control.

It is mostly being used for image lazy loading.

HTML:

<img class="lazy-loaded-image lazy" src="PATH_TO_PLACEHOLDER_IMAGE" data-src="PATH_TO_ACTUAL_IMAGE" />
<img class="lazy-loaded-image lazy" src="PATH_TO_PLACEHOLDER_IMAGE" data-src="PATH_TO_ACTUAL_IMAGE" />
<img class="lazy-loaded-image lazy" src="PATH_TO_PLACEHOLDER_IMAGE" data-src="PATH_TO_ACTUAL_IMAGE" />
<img class="lazy-loaded-image lazy" src="PATH_TO_PLACEHOLDER_IMAGE" data-src="PATH_TO_ACTUAL_IMAGE" />

JS:

var lazyImages = [].slice.call(document.querySelectorAll(".lazy-loaded-image.lazy"));

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
        }
    });
});
/** Now observe all the non-loaded images using the observer we have setup above **/
lazyImages.forEach(function(lazyImage) {
    lazyImageObserver.observe(lazyImage);
});

For more resources How to use them.

https://medium.com/fasal-engineering/image-lazy-loading-using-browsers-intersection-observer-api-a-step-by-step-guide-with-examples-b1a867614e8

https://medium.com/swlh/intersection-observer-in-javascript-efcf13c154ce

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

For compatibility with browsers.

https://caniuse.com/?search=Intersection%20Observer

Upvotes: 2

Related Questions