Use the link prefetching function of html5.

Source: Internet
Author: User
Tags prefetch

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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.