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()
})
})
or with Fetch
const links = document.querySelectorAll('a')
Array.from(links).forEach((link) => {
link.addEventListener("mouseenter", () => {
fetch(link.href, { cache: "force-cache" })
})
})
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)
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/
I didn't use Gatsby before. I think The PRPL Pattern can help us in our project.
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.
I checked now. Looks really useful. I should implement it. Thanks.