prefetch prerender multiple pages on hover

Question

I have the following code which prefetches and prerenders *specific links on hover, My question is, Do I need to add a new link each time, or is it enough that I change the href?

$(".prerender").on("mouseover", function() {
        var link = $(this).attr("href"),
            prerenderLink = $("#prerenderLink");
        if (prerenderLink.length) {
            if (prerenderLink.attr("href") === link) return;
            prerenderLink.attr("href", link);
        } else {
            $('<link id="prerenderLink" rel="prefetch prerender" href="' + link + '" />').appendTo("body");
        }
    });

Will removing, changing the href cancel the pre-rendering/pre-fetching of a previously defined href or even remove it from cache? Or since it was called once it stays in cache?

Also, Where can this be tested?

*Because Pre-rendering is an advanced experimental feature, and mis-triggering it can lead to a degraded experience for your users, including increased bandwidth usage, slower loading of other links, and slightly stale content. You should only consider triggering prerendering if you have high confidence on which page a user will visit next, and if you’re really providing added value to your users.

Answer 1

Whether changing the href will cancel a network request is probably browser-dependent and whether it's removed from the cache is probably browser and user settings dependent.

To test it, pop up your development tools with F12, open the network tab and check the status column. If it's 304 (not modified) it came from cache.