Use prerender and prefetch in Internet Explorer 11 to improve your website's navigation. Prerender (also called preload) specifies a webpage to be loaded (rendered) in the background while the user reads the current page and prefetch identifies resources to be downloaded in the background. Because both features download content before it's needed, the resources are instantly available when needed by the user.
Here, you'll learn how to use link elements to prerender webpages and prefetch resources in the background.
As a user reads a webpage using IE11, the browser can load and render additional content in the background. As a web developer, you can identify the webpage and resources the user is likely to need next. By doing so, you improve the perceived performance of your website because the content is ready and can be displayed more quickly.
Suppose you've written an article that's broken into separate webpages. As the user reads each page, you can preload the next so that it's displayed when the user is ready for it. Or, if you've created a site containing several articles, you can use the home page to download stylesheets, images, and other resources used on each page so that each article loads more quickly.
You can use the link element to do this. As of IE11, the following values are now supported for the rel attribute:
Note Internet Explorer also supports the "next" and "prev" values for the rel attribute. For more info, see Determining flip ahead targets.
These link element values are supported only for top-level documents; they are ignored when applied to child (iframe) documents.
Target URLs must refer to individual filenames (relative or fully-qualified). Wildcards are not supported.
Loading background resources effectivelyWhen you use the link element to preload a webpage, IE11 loads and renders the page in the background.
Loading a webpage in the background does not reduce the time required to load the page. The page requires the same number of network requests, whether it's loaded in the foreground or the background.
The difference comes from the user's perspective. Because prerendered pages load and render in the background, they display immediately when the user clicks the link. Because users don't watch the page load, they feel that it displays more quickly.
Prerendering requires these conditions:
Pages can't be fully rendered in the background if any of these conditions apply:
In these cases, the target page is paused while in the background. When the user chooses the target page, it's displayed and rendering resumes from where it was paused.
Prerendered pages are not always displayed to the user. These conditions cause prerendered pages to be discarded from memory without being displayed:
When a prerendered page is discarded and then requested later, it's loaded from the hosting server directly. If the page is still in browser cache, it might load more quickly; however, this is not guaranteed.
Loading a page in the background may lead to certain side-effects. Specifically, for activities run during a load event, you might find:
Microsoft ActiveX controls aren't loaded until the user displays the page. Use the readyState property to verify the objects are available before relying on them in JavaScript.
Certain animations may not appear when the page is displayed. This is likely because they've already run while the page was loaded in the background.
Timers may give unexpected results.
Cookies, cached content, and changes made by asynchronous operations (such as IndexedDB and web storage) are retained.
If you run into these or other related side effects, use the Page Visibility API to determine when the page is visible. Animations, for example, should be delayed until the page is visible. To learn more, see Effective use of prerender and prefetch.
SpecificationHTML5, Section 4.12.5.9
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3