HTML 5 caching mechanism: Cache manifest Configuration Instance

Cache manifest is a caching mechanism for HTML 5, the author of the article directly with the blog when the test environment, although the application is very simple, but the effect is surprisingly good. The speed after the cache is simply amazing and fast. Like YSlow display, open a cached page, as long as 0.729 seconds, than not cache almost 10 times times faster.

First, Cache manifest basic knowledge

As a web developer-related person, you will not hear or see the word cache less. Yes, it has been said, it is a caching mechanism. It can be configured with a. manifest file to configure files that need to be cached or that must remain networked. And the point is this. manifest file, here is a simple collation:

MIME Type:text/cache-manifest

Need to be created by you: Name.manifest

Role: Primarily configure 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 branch to server

For example, Apache can be added in. htaccess:

 
  
 

  
   
  
AddType text/cache-manifest Manifest
 
  
 

2. Create Name.manifest:

The first line of the cache manifest logo is certain, 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 pages that do not want to be cached, such as landing pages; fallback refers to an alternative when there is no response, such as I want to request a page, but the server on this page is dead, then, I can display another specified page with the following file structure:

 
  
 

  
   
  
CACHE MANIFEST
  
   
  

  
   
  
# VERSION 0.3
  
   
  

  
   
  
# files that are cached directly
  
   
  
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? As long as you change the contents of the file, the # VERSION 0.3 above is just a line of comments, but change the file can be cached, so write the version number, want to update the version number to be modified to cache, is a more recommended method, or even best practice.

3. Add the Manifest property to label

Yes, it is so simple, I believe you spend 30 minutes to understand, and can quickly apply to the work.

Third, the problem of Cache Manifest

After a whole, the speed is obviously much faster, help test people also small shocked a bit, but, there are some problems, look, and then we try to solve:

1. Automatically cache a page that references a manifest file

Even if you specify "*" In Network (all pages) use the network, you cannot resolve it to automatically cache the current page. This allows the page to remain "class-static" without manifest changes. For example, you have updated an article backstage, this dynamic home page, or as the first time cached, unchanged. This is fine for static pages, but it's a hassle to apply to a dynamic system because your content is always updated.

2.Firefox Pop-up Alert information

may be accustomed to the window warning and so on, carelessly, the user thought is the site was hanging horse, want to put the dirty things stored to his computer.

Iv. Solutions

(i) about automatically caching the current page

In "Pro HTML5 programming" There is a sentence: this is not a bug, but the need for the mechanism. Although this will make the page load faster, but for the dynamic page is disgusting. At a minimum, there should be a configuration scheme (or a switch) that lets the user choose whether to cache the current page. However, this is temporarily unresolved, after all, this is only a draft, we need to use, we should find a suitable solution.

My idea is to see if everyone has a better idea. As a result, checked, no fruit. New things, almost all the articles are just the one I said above how to write a manifest file, it seems that there is no way to lazy. Then, he began to think:

Be sure not to cache dynamic pages, the current page must not refer to the manifest file.

Can I load the cache from other pages first?

Then, if there is a solution, the solution should be:

Does not reference manifest on the current page.

Before the user opens the page, a page is needed to implement the caching mechanism.

If so, why not try the IFRAME to introduce a static file with manifest? But the IFRAME can also be cached to the file? After a test, Google Chrome's debugging tool gave the answer: The result is very good, successful caching. This is done by creating a new cache.html file to act as a proxy for the current page, which reads:

 
  
 

  
   
  

  
   
  

  
   
  

  
   
  

  
   
  
cache
  
   
  

  
   
  

  
   
  
Hi sofish!
  
   
  

  
   
  

 
  
 

Then, in each page through the IFRAME to refer to this static file, so that we do not cache the face of the page, only the purpose of caching the files we want to cache.

(b) About Firefox pop-up warning issues

This, the browser default, the browser manufacturer's purpose is for the user's security, we can not change for the time being. In fact, will not have too much impact, I did not think well.

V. Summary

Test down, in fact, with the cache current page still has a difference, after all, like a link outside the station, especially Gravatar always ask so many pictures, this is a little more time. This phenomenon mainly appears in Firefox, and Webkit is very good, almost as fast as the cache current face, the second open page, are instantaneous response, the effect is very good.

Original link: http://www.happinesz.cn/archives/1449/

"Edit Recommendation"