Atitit. Improved performance AppCache and atititappcache

Atitit. Improved performance AppCache and atititappcache

Atitit. Improved performance AppCache

 

1.1. Origin 1

2. offline storage 2

3. AppCache2

3.1. Appcache event point 2

3.2. Manifest file 4

3.3. Automated Tools 4

3.3.1. CACHE: (required) 5

3.4. All pages are offline, and ajax is updated 5

3.5. How to include page Parameters Using js parsing 6

3.6. Offline page update long tail Issue 6

3.7. How to update cache 7

3.8. Note 8

 

1.1. Origin

Web pages before html5 are non-connected and can only be accessed through the Internet. This is actually a feature of the web. In fact, PC is not a big problem in the era, but in the mobile Internet era, the device terminal location is no longer fixed and relies on wireless signals, reducing the network reliability. For example, if you sit on a train and pass through a tunnel (15 minutes), you will not be able to access the website, this is very harmful to the web, for example, for reading pages such as the ecmascript collection.

Html5 introduces the cache manifest file. So what is cache manifest.

 

2. Offline storage

In actual work, the offline cache is localstorage and Application cache, both of which are good things. One is commonly used for ajax request caching and the other is commonly used for static resource caching, here are some of my understandings.

Offline Storage Technology

HTML5 proposes two offline storage technologies: localstorage and Application Cache, which have their own Application scenarios. The traditional offline storage technology is Cookie.

After practice, we believe that localstorage should store some non-critical ajax data for the icing on the cake;

Application Cache is used to store static resources. It is still a icing on the cake;

 

Author ::★(Attilax)> nickname: old wow's paw (full name: Attilax Akbar Al Rapanui Attila Akba Arla Panui) Chinese name: AI long, EMAIL: 1466519819@qq.com

Reprinted please indicate Source: http://www.cnblogs.com/attilax/

 

3. AppCache

Note: adding a worker to the NETWORK is ineffective.

 

In the AppCache File

You do not need to explicitly list the pages linked to by AppCache, because by default, any page containing the manifest attribute of the html element will be cached. These automatically cached pages are called as the primary entries, the files listed in the list are called detailed entries. If some files need to be accessed online, you can create a file whitelist. If they are listed on the NETWORK, these files can always be loaded over the network. These files are called network entries.

Using Application cache can speed up website loading, mainly reflected in request transmission. It converts some http requests to local reading, effectively reducing network latency and reducing http requests, why not to save traffic

 

 

In addition, management of manifest files should be completed, which may be caused by files in the list being inaccessible or the manifest update being delayed.

 

A new manifest attribute is added to html to specify the manifest file on the current page.

 

3.1. Appcache event point

3.2. Manifest File

Next, let's talk about the details of manifest. The code structure of a typical manifest file is as follows:

Cache manifest # version 1.3 CACHE: test.css NETWORK :*

The basic format of the manifest file is three sections: CACHE, NETWORK, and FALLBACK. NETWORK and FALLBACK are optional.

The first line of cache manifest is in a fixed format and must be prefixed.

A comment starts with #. a version number is usually written in the second line to change the manifest when the cached file is updated. It can be a version number, timestamp or md5 code.

 

About manifest.

FirstContentType = text/cache-manifest

Then, the extension is recommended"Appcache"

 

3.3. Automated Tools

In the cache part of the manifest file, wildcards cannot be used and must be manually specified. This is too confusing. If there are more than one file, it becomes a physical activity.

 

3.3.1. CACHE: (required)

Identifies which files need to be cached, which can be relative or absolute paths.

A.css http://yanhaijing.com/a.css

NETWORK: (optional)

This part is the file to be read directly without the cache. wildcard * can be used *.

The following code "login. asp" will never be cached and is unavailable offline:

NETWORK: login. asp

FALLBACK: (optional)

A backup page is specified. When resources cannot be accessed, the browser will use the page. Each record in this section lists two Uris-the first one indicates the resource, and the second one indicates the backup page. Both Uris must use relative paths and are the same as the list files. Wildcard characters can be used.

In the following example, if you cannot establish an Internet connection, use limit 404.html to replace all files in the/html5/directory.

FALLBACK:/html5 // 404.html

In the following example, the replacement of all files is 404.html.

FALLBACK: *. html/404.html

 

3.4. All pages are offline,Ajax Update

A. first, you can modify the manifest file to update this page. I will not introduce this page, but after the content page is offline, it will be stored locally, if you are an article, the content page of this article will be saved. If you access it with the same url, no matter whether the data in your article is updated, this offline page will not be updated (unless you update the manifest file ). Therefore, you have to use ajax to obtain all the dynamic data. Just like a client, an offline page should be an empty shell without data, then, use ajax to pull data to fill the shell. Note that the ajax request address should be written to the network of manifest. Otherwise, you can try it.

3.5. How to include page Parameters Using js Parsing

For example, m.baidu.com/app? A = 1 & B = 2. We usually use some parameters to mark this page and use parameters to render the page content. However, manifest, different parameters are considered to represent different pages. If you create a content page

 

 

3.6. Long Tail of offline page updates

The website is updated. What if the local offline page of the user is updated? As mentioned in many articles, first launch your file and then modify the cache introduced on the page. you can modify the manifest file, for example, modify the comment. After modification, If you access the page again, you will first check the manifest for updates. If there is an update, When you refresh the page again, the page is updated.

A. Long Tail problem,As mentioned above, if your manifest file is updated and you need to refresh the page to load the updated page, there is a problem, if your backend data is changed for the js ajax interface, your corresponding js is also modified. When you modify manifest to go online, the page will be bug when you open the page for the first time. Just click the page again. So we don't want to see this first visit bug. In addition, you cannot know when the user will visit your page again for the second time. Therefore, once your page is offline using manifest, it will be like a client, so there will be a long tail problem. Fortunately, manifest has some js interfaces that can be used to determine whether to load the Update file.

B. Refresh the page

Copy a piece of api code:

1. 1 The applicationCache object corresponding to the current document

2. window. applicationCache

3. 2 cache. status attribute, return the status of the current Offline Application

4. UNCACHED (value 0): Offline Application not enabled

5. IDLE (value 1): The Offline Application has been enabled, but the locally cached resources are the latest and are not marked as obsolete resources.

6. CHECKING (value 2): the status of the updated cache is "CHECKING"

7. DOWNLOADING (Value 3): the status of the update cache is "DOWNLOADING resources"

8. UPDATEREADY (value 4): the status of the update cache is "updated"

9. OBSOLETE (value 5): offline applications are enabled, but cache resources are marked as OBSOLETE.

3.7. How to update Cache

You can update the cache in the following three ways:

·

Update the manifest File

·

·

Operate through javascript

·

·

Clear browser cache

·

To add or delete a file to or from a manifest file, you can update the cache. if Javascript is changed but not added or deleted, the version number in the preceding example can be used to update the manifest file.

Html5 introduces the js offline cache operation method. The following js can manually update the local cache.

Window. applicationCache. update ();

If you clear the browser cache (manually or using other tools), the file will be downloaded again.

3.8. Notes

·

The browser may not have the same size limit on the cached data (Some browsers set a limit of 5 MB for each site ).

·

·

If a manifest file or an internal file cannot be downloaded normally, the update process will fail and the browser will continue to use the old cache.

·

·

The html that references manifest must be the same as the manifest file in the same domain.

·

·

The resources in FALLBACK must be the same as the manifest file.

·

·

When a resource is cached, the browser directly requests this absolute path to access the resources in the cache.

·

·

Even if the manifest attribute is not set for other pages on the site, the requested resources are also accessed from the cache.

·

·

When the manifest file changes, the resource request itself also triggers an update.

 

1. standard encouragement: cache pages that contain manifest lists. Therefore, even if we do not display pages that contain manifest in the manifest cache list, this page will be cached.

2. the HTTP-related cache header domain and https cache page restrictions will be ignored by manifest. therefore, it will not expire before the user agent updates the page. that is to say, even an HTTPS thing. it can also work offline.

 

 

Reference

HTML5 AppCache Mechanism Analysis-liqing20171653 column-blog channel-CSDN.NET.html

Use manifest-Cool. html with caution

HTML5 Application Cache-ye xiaochai-bokyue.html