Comments: Link prefetching (HTML5) is a gem buried in the sand. So far, few people know the value of link prefetching.
The link prefetching function of HTML5 is a gem buried in the sand, so far few people know its value. You may already know the old and famous image pre-loading function. The link prefetch function extends the concept from image to webpage content (no AJAX code is required ).
It works like this: add a link like this on the page:
The Code is as follows:
<Link rel = "next" href = "page2.html">
In this case, when your machine is idle, the browser automatically downloads page2.html in the background. When the user finishes the link of page2.html, the browser will retrieve the page from the cache, so the page loading speed will be unexpected.
Currently, Firefox only supports this function. However, Firefox is currently the world's second largest user group browser, so as long as you add such a code on the HTML page, there are still some visitors who can experience this significant increase in page loading speed. Cool!
You can use the link prefetch function in many cases.:
* When you have a long article, online tutorial, or gallery, you need to display it in multiple pages.
* Pre-load the next pages that users are most likely to access on the homepage of your website. (It may be the "Key Recommendation" product page on a product website, or the most recent blog on the blog site)
* Pre-load the first few items on the search query page.
For static content, you can also use the rel mark to implement the prefetch function:
The Code is as follows:
<Link rel = "prefetch" href = "/images/big.jpeg? Ca541d ">
There are other interesting things to note:
* The Link prefetch function will be implemented in Opera, Chrome, and Safari soon, but for Internet Explorer, you are estimated to wait until 2020.
* If this function is widely used, it will affect your website log and access statistics. In this case, you have pre-accessed several pages on one page, but you have not actually accessed these pages. Your server (or statistical tool) does not know the difference between the two.
To distinguish this, Firefox will send X-moz: prefetch information in the HTTP header, but you need something on the server to identify this information.