Use HTML5 link prefetching to speed up your website_html5 tutorial tips

HTML5’s link prefetching is a gem buried in the sand, and few people know its value yet. You may already know the ancient and famous image preloading function. The link prefetching function extends this concept from images to web content (without any AJAX code).
Here’s how it works: Add a link to the page like this:

Copy the code

The code is as follows :

In this way, when your machine is idle, the browser will automatically Download page2.html in the background. When the user finally clicks the link to page2.html, the browser will fetch the page from the cache, so the page will load unexpectedly fast.
Currently only Firefox supports this feature. But because Firefox is currently the browser with the second largest user base in the world, as long as you add such a line of code to the HTML page, there will still be a considerable number of visitors who can experience this very obvious page loading speed. improve. How cool!

You can use the link prefetching function in many situations :
* When you have a long article, or online tutorial, or album, etc., you need to divide it into When multiple pages are displayed.
* Preload the next pages your users are most likely to visit on your homepage. (It may be a "highly recommended" product page on a product website, or a recent blog on a blog website)
* The search query page preloads the first few items searched.
For static content, you can also use the rel tag to implement the prefetch function:

Copy the code

The code is as follows:

There are some other interesting things to note here :
* Link prefetching will be implemented in Opera, Chrome and Safari browsers soon, but for Internet Explorer, you may have to wait until 2020.
* If this feature is used extensively, it will affect your website logs and access statistics. Please consider the situation where one of your pages has pre-fetched several pages, but the user has not actually accessed these pages. Your server (or statistics tool) doesn't know the difference between the two.
To distinguish this, Firefox will send the X-moz: prefetch message in the HTTP header, but you need something on the server side to recognize this message.