Page-related data Storage (Cache and Web Storage)

Available page caches include Http Cache, Local Storage, Session Storage, and Application Cache. they can be used to reduce the number of requests to improve page performance and reduce traffic consumption, which is more important for mobile browsers (In addition, Memory Cache, but it is transparent for front-end projects ).

Http Cache

The most common cache mechanism. Compared with the last three modules in the browser kernel (also defined in H5), Http Cache already exists in the HTTP module. It is a part of the implementation of the HTTP protocol at the network layer. It resolves the Cache Conrol information in the response header and performs operations such as freshness check and conditional update to manage the Cache. The cache capacity limit, elimination, and update algorithms are implemented differently in different browsers, which are the focus of browser and page development optimization. For example, caching Zhao duo's content will reduce the number of webpage requests. However, when the cached content reaches a certain amount, the query and I/O will slow down, but the input-output ratio will decrease. The capacity is determined based on the storage space. Different browsers have different maximum values, and different users depend on the total cache size in actual use. These are all considerations for browser performance optimization.

For more information, see <manage page cache>.

One of its problems is that the elimination of cache content is implemented based on algorithms, and it cannot guarantee that a resource needs to be reserved separately. All resources may be eliminated due to changes in cache policies and storage space. For this scenario, HTML5 defines an Applcation Cache that better supports offline browsing.

Application Cache 

This service is applicable to scenarios where users can continue to use pages, such as offline games and Office editing applications. Without clear capacity restrictions, WebKit series browsers will have a limit of 5 Mbytes for each domain name (default, but it will change ). Considering that some browsers use UTF-16 encoding for storage, it cannot really reach 5 MBytes.

Application Cache is a request-based Active Cache. The cached content is controlled by the Cache Control information, including related freshness detection.

In actual applications, Application Cache is prone to problems. Typical examples are: how to change the manifest file to achieve resource update, and may cause repeated Cache (the time for manifest Parsing is different ). When deciding to use Application Cache, you must read this article carefully: <Application Cache is a Douchebag>.

The API provided by Application Cache is very simple. It does not rely on JS to implement the Cache, but can also obtain the Cache status through the API. For more information, see <Offline Web Applications>.

Local Storage & Session Storage

The usage is similar to that of cookies, which mainly deals with situations where cookies are not suitable for storing large data. Otherwise, the data that interacts with the server becomes larger and the performance is easily affected .. Compared with Applcation Cache, their usage depends on JS, but it is simple and clear.

Local Storage and Session Storage are called Web Storage in H5. They use the same API, but they have different cycles. The former can be stored all the time without time restrictions. The latter only exists in one session period and is cleared after the user closes the browser (unless the browser supports restoring the previous session after restart ).

There are different calling methods in the stored API, and their performance is different, and different browsers have different performances:

The possible cause is that the execution performance of the JS Engine is gradually improved, and the DOM operation time has a greater impact on the performance. The following data comes from statistics of pages on which the IE team uses more AJAX requests:

The biggest problem with Web Storage is the Storage synchronization problem. Fortunately, some JS libraries can help improve this problem. For more information, see <HTML5 and JavaScript Web Apps> Chapter 4 Optimizing with Web Storage.

Reprinted please indicate the source: http://blog.csdn.net/horkychen