HTML 5 caching mechanism: Cache manifest Configuration Instance

Source: Internet
Author: User

Cache manifest is a caching mechanism for HTML 5, and the author uses blogs directly as a test environment, although [color= #444444!important] is very simple to apply, but surprisingly good. Cached after the speed, is simply amazing fast. Like YSlow Show, open a cached page, as long as 0.729 seconds, than not cache nearly 10 times times faster.
First, Cache manifest basic knowledge
As a web development-related person, there is no less hearing and seeing the word cache. Yes, it's already said, it's a caching mechanism. It can be configured with a. manifest file to configure the files that need to be cached or that must be kept in a networked cache. And the point is this. manifest file, which is briefly organized here:
MIME Type:text/cache-manifest
Need to be created by you: Name.manifest
Role: Mainly configure the files that need to be cached
Second, how to achieve
The implementation is very simple (of course, this is also problematic, this we talk about the solution), the implementation steps are as follows:
1. Add MIME type support on the server
For example, Apache can be added in. htaccess:

The following is a reference fragment:
AddType text/cache-manifest Manifest

2. Create Name.manifest:

The first line of the cache manifest identity is required, and cache/network/fackback are optional. If there is no write identity, then the default cache, the cache is needless to say, caching; network refers to a page that you do not want to cache, such as a landing page, etc. FALLBACK is an alternative when there is no response, such as I want to request a page, but the server of this page hangs, then, I can display another specified page, the file structure is as follows:

The following is a reference fragment:
CACHE MANIFEST
# VERSION 0.3
# Directly cached files
CACHE:abc.html
Images/sofish.png
Js/main.js
Css/layout.css
# need files in time online
NETWORK:
/wp-admin/
# Alternative Solutions
FALLBACK:/
Ajax/ajax.html

How do I update this configuration file? Just change the contents of the file, the above # VERSION 0.3 is actually just a line of comments, but change the file can be re-cached, so write the version number, want to update the time to modify the version number to re-cache, is a more recommended method, or even best practice.
3. Add manifest attribute to &html& tag

The following is a reference fragment:
&html manifest= "Path/to/name.manifest" &

Yes, it is so simple, I believe you take 30 minutes to understand, and can quickly apply to the work.
Third, the Cache Manifest existing problems
Through the above, the speed is significantly faster, a lot of people to help test the small shock, just, there are some problems, look, and then we try to solve:
1. Automatically cache pages that reference the manifest file
Even if you specify "*" (all pages) in the network, you cannot resolve it to automatically cache the current page. This allows the page to remain "class static" in the absence of a manifest change. For example, you have updated an article in the background, the dynamic home page, or as the first time the cache, unchanged. This is good for static pages, but it is cumbersome to apply to a dynamic system because your content is always updated.
2.Firefox Pop-up tip information
may be accustomed to the pop-up window warning or the like, accidentally, the user also thought that the site was a person hanging horse, want to put the dirty things stored in his computer.
Iv. Solutions
(i) About automatic caching of the current page
In "Pro [color= #444444!IMPORTANT]HTML5 Programming" There is a saying: This is not a bug, but the need for a mechanism. While saying this will make the page load faster, it is disgusting for dynamic pages. There should at least be a configuration scheme (or a switch) that lets the user choose whether to cache the current page. However, this is temporarily unable to solve, after all, this is just a draft, we need to use, we should find a suitable solution.
My idea is to see if everyone has a better idea. The result, looked up, no fruit. New things, almost all of the articles are just what I said above how to write a manifest file, it seems there is no way to lazy. Then, you start to think:
Be sure not to cache dynamic pages, the current page must not reference the manifest file.
Can I load the cache from other pages first?
So, if there is a solution, the solution should be:
Manifest is not referenced in the current page.
Before the user opens the page, a page is required to implement the caching mechanism.
If so, why not try the IFRAME to introduce a static file with manifest? But is it possible to cache files with an IFRAME? After a few tests, Google Chrome's Debugging Tools gave the answer: the results were good and the cache was successful. The way to do this is to create a new cache.html file as the proxy for the current page, with the following content:
The following is a reference fragment:
<! DOCTYPE html>
http://www.happinesz.cn/sofished.manifest">
<meta charset=utf-8/>
<title&cache&/title>
<body> Hi sofish!
</body>

Then, in each page through the IFRAME to refer to this static file to achieve we do not cache the face page, only the purpose of caching we want to cache files.
(b) about the Firefox pop-up warning issue
This, browser default, browser manufacturer's purpose is for the security of the user, we can not change for the time being. In fact, there will not be too much influence, I did not think well.
V. Summary
Test down, in fact, with the cache of the current page is still a difference, after all, like a link outside the station, especially Gravatar always request so many pictures, this is a little more time. This phenomenon is mainly in Firefox, and Webkit is very good, the speed is almost the same as the cache current face, the second open page, are instantaneous response, the effect is very good.

Detailed Description: http://html5.662p.com/thread-24-1-1.html

HTML 5 caching mechanism: Cache manifest Configuration Instance

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.