Shulou(Shulou.com)06/03 Report--

This article introduces how to configure Cache Manifest in HTML 5 cache mechanism. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Cache Manifest is a caching mechanism of HTML 5. The author directly uses the blog as the test environment. Although the application is very simple, the effect is surprisingly good. The speed after caching is amazingly fast. As Yslow shows, it takes only 0.729 seconds to open a cached page, which is almost 10 times faster than a page that is not cached.

1. Basic knowledge of Cache Manifest

As a person related to Web development, you will hear and see the word Cache. Yes, as mentioned above, it is a caching mechanism. It can configure files that need to be cached or must be cached online through a .manifest file. The point is this .manifest file, which is simply sorted out here:

◆ MIME TYPE:text/cache-manifest

◆ needs to be created by you: NAME.manifest

◆ function: mainly to configure files that need to be cached

Second, how to realize

It is very simple to implement (of course, this is also problematic, which we will talk about the solution later), and the implementation steps are as follows:

1. Add MIME TYPE branches on the server

For example, in Apache, you can add to .htaccess:

AddType text/cache-manifest manifest

two。 Create a NAME.manifest:

The CACHE MANIFEST logo of the * line is required, and the CACHE/NETWORK/FACKBACK is optional. If there is no write ID, the default cache is Cache, needless to say, cache; NETWORK refers to the page that you do not want to cache, such as login page; FALLBACK refers to the alternative when there is no response, such as I want to request a page, but the server of this page is down, then I can display another specified page with the file structure as follows:

CACHE MANIFEST # VERSION 0.3 # directly cached files CACHE: abc.html images/sofish.png js/main.js css/layout.css # requires time-online files NETWORK: / wp-admin/ # alternative FALLBACK: / ajax/ ajax.html

As for how to update this profile? As long as you change the content of the file, the above # VERSION 0.3 is actually only a line of comments, but changing the file can be re-cached, so that you can write the version number and change the version number to re-cache when you want to update it. This is a recommended method, or even a * * practice.

3. Add a manifest attribute to the tag

Yes, it's that simple. I'm sure it will take you 30 minutes to understand it, and you can quickly apply it to work.

III. Problems existing in Cache Manifest

After the whole process above, the speed is obviously much faster, and the people who help with the test are also a little shocked, but there are still some problems, take a look, and then we try to solve:

1. Automatically cache pages that reference manifest files

Even if you specify "*" (all pages are) to use the network in NETWORK, it still doesn't solve the problem that it automatically caches the current page. This allows the page to remain "quasi-static" as long as the manifest has not changed. For example, if you update an article in the background, the dynamic home page remains the same as when it was cached for the first time. This is fine for static pages, but it is troublesome to apply it to a dynamic system because your content needs to be updated all the time.

2.Firefox pop-up prompt message

May be used to pop-up window warning and so on, accidentally, the user thought that the site was hung up by someone, want to store unclean things in his computer.

IV. Solution

(1) about automatically caching the current page

There is a saying in "Pro HTML5 Programming": this is not a Bug, but a need for a mechanism. Although 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 allows users to choose whether or not to cache the current page. However, this cannot be solved for the time being. after all, it is only a Draft. If we want to use it, we should find a suitable solution.

My idea is to see if everyone has a better way. As a result, I checked, but to no avail. New things, almost all the articles are about how to write a manifest file that I mentioned above, it seems that there is still no way to be lazy. Then I began to think:

◆ must not cache dynamic pages, and the current page must not reference manifest files.

Can ◆ load the cache from other pages first?

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

◆ does not reference manifest on the current page.

◆ needs a page to implement the caching mechanism before the user opens the page.

If so, why not try iframe to introduce a static file with manifest? But can you cache files with iframe? After a round of testing, Google Chrome's debugging tool gave the answer: the result is very good, successfully cached. To do this, create a new cache.html file to act as a proxy for the current page, as follows:

Cache hi sofish!

Then, the static file is referenced through iframe on each page, so that we do not cache the face-to-face page, but only the file we want to cache.

(2) about Firefox pop-up warning

This, the browser default, the browser manufacturer's goal is for the sake of the user's security, we also cannot change for the time being. In fact, it won't have much impact, and I didn't think about it.

Test down, in fact, it is different from caching the current page, after all, it is like an off-site link, especially when gravatar always requests so many pictures, which gives you a little more time. This phenomenon mainly occurs under Firefox, while Webkit means that it is very good, and the speed is almost the same as that of cache. the second open page is instant response, and the effect is very good.

So much for sharing about how to configure Cache Manifest in HTML 5 caching mechanism. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.