Cache Manifest is a caching mechanism of HTML 5. The author uses the blog as the test environment directly, although [color = #444444! Important] The application is very simple, but the effect is surprisingly good. The cache speed is amazing. As Yslow shows, it takes only 0.729 seconds to open a cached page, which is about 10 times faster than that without caching.
I. Basic knowledge about Cache Manifest
As a Web developer, the word Cache is rarely heard or seen. Yes, as mentioned above, it is a cache mechanism. It can use a. manifest file to configure files that need to be cached or must be cached online. The focus is on this. manifest file, which has been simply organized here:
◆ Mime type: text/cache-manifest
◆ NAME. manifest
◆ Role: Mainly configure the files to be cached
Ii. How to Implement
The implementation is very simple (of course, this is also a problem. We will talk about the solution later). The implementation steps are as follows:
1. Add mime type support to the server
For example, you can add:
The following is a reference clip:
AddType text/cache-manifest
2. Create NAME. manifest:
The first line of the cache manifest mark must be available, and the CACHE/NETWORK/FACKBACK is optional. If no logo is written, the Cache is cached by default. Cache is unnecessary. NETWORK refers to pages that do not want to be cached, such as login pages. FALLBACK refers to an alternative solution when no response is received, for example, if I want to request a page but the server of this page is down, I can display another specified page with the following file structure:
The following is a reference clip:
CACHE MANIFEST
# VERSION 0.3
# Directly cached files
CACHE: abc.html
Images/sofish.png
Js/main. js
Css/layout.css
# Files that require online time
NETWORK:
/Wp-admin/
# Alternative
FALLBACK :/
Ajax/ajax.html
How to update this configuration file? As long as you change the file content, the above # VERSION 0.3 is actually only a line of comment, but the file can be cached again, so that you can write the VERSION number and modify the VERSION number to cache it again when you want to update it, is a relatively recommended method, or even a best practice.
3. Add the manifest attribute to & html & tags
The following is a reference clip:
& Html manifest = "path/to/NAME. manifest "&
Yes, it's so easy. I believe it takes you 30 minutes to understand and quickly apply it to your work.
Iii. Problems with Cache Manifest
After completing the above steps, the speed was much faster, and the people who helped the test were also shocked. However, there were still some problems. Let's take a look and try to solve them:
1. Automatically cache pages that reference manifest files
Even if "*" (all pages) are specified in the NETWORK, the current page cannot be automatically cached. This causes the page to always exist as "class static" without changing the manifest. For example, if you update an article in the background, the Dynamic Homepage remains unchanged as it was during the first cache. This is good for static pages, but it is very troublesome to apply it in a dynamic system, because your content is always updated.
2. Firefox Pop-up prompt
You may be used to pop-up window warnings and so on. When you accidentally think that the website is infected with Trojans, you want to store the unclean things on your computer.
Iv. Solutions
(1) about automatic cache of the current page
Go to Pro [color = #444444! Important] HTML5 Programming has the following sentence: this is not a Bug, but a mechanism requirement. Although this will make the page Load faster, it is disgusting for dynamic pages. There should be at least one configuration scheme (or a switch) that allows users to select whether to cache the current page ). However, this cannot be solved for the time being. After all, this is just a Draft. If we want to use it, we should find a suitable solution.
My idea is to see if there is any better way. The result is fruitless. Almost all the new articles talk about how to write a manifest file. It seems that there is no way to be lazy. Then, I started to think:
◆ Do not cache dynamic pages. The current page must not reference the manifest file.
◆ Can I load the cache from other pages first?
If there is a solution, the solution should be:
◆ Manifest is not referenced on the current page.
◆ Before a user opens a page, a page is required to implement the cache mechanism.
If so, why not try iframe to introduce a static file with manifest? But can I still cache files with iframe? After testing, Google Chrome's debugging tool gave the answer: the result is good and the cache is successful. In this way, a new cache.html file is created as the proxy for the current page. The content is as follows:
The following is a reference clip:
<! DOCTYPE html>
<Html manifest = "http://www.happinesz.cn/sofished.manifest">
<Head>
<Meta charset = UTF-8/>
<Title & cache &/title>
</Head>
<Body> hi sofish!
</Body>
</Html>
Then, the static file is referenced through iframe on each page, so that we do not cache face-to-face pages, but only cache the files we want to cache.
(2) Firefox Pop-up warning
By default, browser vendors aim to ensure user security, and we cannot change it for the moment. In fact, it will not have much impact, and I have not thought about it.
V. Summary
After testing, it is actually different from caching the current page. After all, like links outside the site, especially gravatar, it takes a little longer to request so many images. This phenomenon mainly occurs in Firefox, while Webkit is very good. The speed is almost the same as that of the current cache. The second page opened is an instant response, and the effect is very good. |
|
