What's the right method to set a new prerender or prefetch in HTML?

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<link rel="prefetch" href="https://www.apple.com/">
<link rel="prerender" href="https://www.apple.com/">
<script>
    document.addEventListener('click', function () {
        // Prerendering https://www.apple.com/ipad on Chrome.
        // ...

        // Prefetching https://www.apple.com/ipad on Firefox.
        // ...
    }, false);
</script>

When the page is opened, https://www.apple.com/ is prerendered and prefetched on different browsers. When the document is clicked, I hope to prerender and prefetch another page, https://www.apple.com/ipad.

It appears we have 2 methods to choose. We can either replace the URLs in current 2 link elements. Or we can insert 2 new link elements into head element.

What's the right method to set a new prerender in HTML?

What's the right method to set a new prefetch in HTML?

I tried to replace prerender link element's URL from https://www.apple.com/ to https://www.apple.com/ipad on Chrome. I turned Chrome's Task manager on and found that https://www.apple.com/ipad wasn't prerednered. The only prerendered page is still https://www.apple.com/. So it appears this method doesn't work?

rstackhouse

<link rel="prefetch"> is actually part of the HTML 5 spec.

<link rel="prerender"> appears to be Google doing their own thing.

Justin is incorrect. You do need both prefetch and prerender (or at least a polyfill that will output both) as FF supports prefetch and Chrome supports prerender.

First of all, you confused me a little with the mixing between prefetch & prerender usages. Their usages should be like this:

prefetch usage:

It should be used for fetching and caching resources for later user navigation as per the official HTML5 spec (i.e. prefetching a css file to be used in a page which highly likely to be used by the user in his upcoming navigation). Supported in Chrome, Firefox & IE.

prerender usage:

It should be used for prerendering a complete page that the user will highly likely navigate to it in his upcoming navigation (i.e. like prerendering the next article where it is highly likely that the user will click on "next article" button). Supported only in Chrome & IE.

Back to your question, you can add browser hints (i.e. like the two link you used) as many as you really need, just don't misuse them because they are resource-heavy.

So, you can inject your hints when the page is generated (like what you did), or you can inject them at runtime using javascript like this:

var hint = document.createElement("link");
hint.setAttribute("rel", "prerender");
hint.setAttribute("href", "https://www.apple.com/ipad");

document.getElementsByTagName("head")[0].appendChild(hint);

For a better understanding for what you can do with all "pre-" goodies, see this brilliant presentation by google.

1) You don't need to use both prefetch and prerender links, you only need prerender. A prerender link will load everything prefetch does, and more.

2) To answer your question, use method 2 and insert another prerender link with javascript. Something link this:

<script>
var myHead = document.getElementsByTagName('head')[0];
var myLink = document.createElement('link');
myLink.setAttribute('rel', 'prerender');
myLink.setAttribute('href', 'http://apple.com/ipad');
myHead.appendChild(myLink);
</script>

Or if you use jQuery:

$("head").append('<link rel="prerender" href="http://apple.com/ipad">');

来源：https://stackoverflow.com/questions/15099915/whats-the-right-method-to-set-a-new-prerender-or-prefetch-in-html

标签

html5

google-chrome

firefox

prefetch

prerender