Forem

Itachi Uchiha
Itachi Uchiha

Posted on

6

Preload on hover?

Hi. I wonder about the preload technique. For example, I have a code piece like below:

const links = document.querySelectorAll('a')

Array.from(links).forEach((link) => {

    link.addEventListener("mouseenter", () => {

        const xhr = new XMLHttpRequest()

        xhr.open("GET", link.href)
        xhr.send()

    })

})
Enter fullscreen mode Exit fullscreen mode

or with Fetch

const links = document.querySelectorAll('a')

Array.from(links).forEach((link) => {

    link.addEventListener("mouseenter", () => {

        fetch(link.href, { cache: "force-cache" })

    })

})
Enter fullscreen mode Exit fullscreen mode

Can this code help to improve performance? We have a real estate project. Properties have too many items like images, text etc.

Actually, I couldn't understand if this was working as expected.

What do you think about that?

Top comments (4)

Collapse
 
nickytonline profile image
Nick Taylor • Edited

It can. This is one of the techniques Gatsby uses. You can read about the PRPL pattern and other performance techniques here, gatsbyjs.org/docs/prpl-pattern/

Collapse
 
itachiuchiha profile image
Itachi Uchiha

I didn't use Gatsby before. I think The PRPL Pattern can help us in our project.

Collapse
 
niorad profile image
Antonio Radovcic

You could check it in the Network-Tab in your DevTools. Dev.to is using something similar. What you could do is to cache the results in an array, and on click replace the HTML of the page with the fetched one, which would give you kind-of-instant page-loads.

Collapse
 
itachiuchiha profile image
Itachi Uchiha

I checked now. Looks really useful. I should implement it. Thanks.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay