HTML5 pre-loading

Source: Internet
Author: User
Tags prefetch

One way to work together between browser vendors and developers is to make the website faster. There are many well-known acceleration solutions: CSS sprites (CSS genie, puzzles), image optimization, distributed configuration files (. htaccess), JS/Text File compression, CDN acceleration, etc.

In another blog, I introduced how to make your website faster.
FireFox introduces a new website acceleration policy: link pre-loading. What is link pre-loading? MDN is described as follows:

 

[Plain]
Pre-loading is a browser mechanism that uses the browser's free time to pre-download/load the pages/resources that users will likely browse next. The page is provided to the set that the browser needs to pre-load. After the browser loads the current page, it downloads the page to be preloaded in the background and adds it to the cache. When a user accesses a pre-loaded link, the page can be quickly displayed if it hits the cache.

Pre-loading is a browser mechanism that uses the browser's free time to pre-download/load the pages/resources that users will likely browse next. The page is provided to the set that the browser needs to pre-load. After the browser loads the current page, it downloads the page to be preloaded in the background and adds it to the cache. When a user accesses a pre-loaded link, the page can be quickly displayed if it hits the cache.
Brief Introduction: based on user analysis, the website allows the browser to download specified pages/documents/images in the background to achieve super easy:


HTML5 pre-loaded labels

 

[Html]
<! -- Page, which can be an absolute or relative path -->
<Link rel = "prefetch" href = "page2.html"/>
 
<! -- Image, or other types of files -->
<Link rel = "prefetch" href = "sprite.png"/>

<! -- Page, which can be an absolute or relative path -->
<Link rel = "prefetch" href = "page2.html"/>

<! -- Image, or other types of files -->
<Link rel = "prefetch" href = "sprite.png"/> as shown in the preceding HTML code, preload the <link> label and specify the rel = "prefetch" attribute, the href attribute is the file path to be preloaded. Mozilla also implements some similar link rel attributes:

 

[Html]
<Link rel = "prefetch alternate stylesheet" title = "Designed for Mozilla" href = "mozspecific.css"/>
<Link rel = "next" href = "2.html"/>

<Link rel = "prefetch alternate stylesheet" title = "Designed for Mozilla" href = "mozspecific.css"/>
<Link rel = "next" href = "2.html"/>
Note: https is also supported.
When to pre-load
Whether or not the website is preloaded depends on your needs. The following are some suggestions:
-If a series of page slides are displayed in the same way, you can pre-load one or three pages before and after each.
-Load Common images inside the website
-Pre-load the next page on the search result page


Block Preload
Firefox allows you to disable the pre-loading mode. The Code is as follows:
[Javascript]
User_pref ("network. prefetch-next", false );

User_pref ("network. prefetch-next", false );
Notes
Note the following for Link pre-loading:
-Pre-loading can be performed across domains. Of course, cookie and other information will also be sent during the request.
-Pre-loading may damage website statistics, but the user does not actually access the website.
-Mozilla Firefox is currently the only browser that supports the pre-loading mode (2003-2010)

What do you think? Using free time to download additional files is a radical optimization. If you have any questions, please contact me.

 

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.