Three data storage scheme of the browser: caching mechanism and caching policy

Cache can reduce network IO consumption, improve access speed. Browser cache is a simple operation and significant effect of front-end performance optimization methods.

The necessity of this operation, the official explanation given Chrome seems to be more convincing some of them:

Access to content across the network speed both slow and huge overhead. Large responses require multiple round-trip communications between the client and the server, which delays the browser content acquisition and processing time, costs will increase the flow of visitors. Therefore, cache and reuse resources acquired before the ability to be a key aspect of performance optimization.

Cache type

Many times, we tend to browser cache simply interpreted as "HTTP cache." But in fact, the browser cache mechanism has four aspects, in accordance with their priority requests when access to resources in order of priority as follows:

Memory Cache
Service Worker Cache
HTTP Cache
Push Cache

We should be more familiar with HTTP Cache (ie, field control Cache-Control, expires cache, etc.), if what the concept might not several other caches: the form "(from xxx)" that description - corresponding resources, these resources that we acquired through the cache.

"From memory cache" for standard type to Memory Cache
"From ServiceWorker" benchmarking to Service Worker Cache type
Push Cache, this is rather special, is a new feature of HTTP2.

HTTP caching

HTTP caching is our daily development of the most familiar kind of caching mechanism. It consists of a strong cache and cache consultation. Higher priority is strong cache, in the case of a strong cache hit failure, will go consultations cache.

I then previous article "One http protocol detailed: Cache (the familiar 304)" has been introduced in the cache http detail, not repeat them here.

MemoryCache

MemoryCache, it refers to the presence of in-memory cache. From the priority, it is the first browser to try a cache hit. From the efficiency, it is one of the fastest response speed cache.

Cache memory is fast, but also "short-lived" in. It and the rendering process "life and death", after the end of the process, after the tab is closed, the memory data will cease to exist.

So which files will be placed in memory?

In fact, this division rule, has long been inconclusive. But think about it can also be understood, the memory is limited, often need to consider the memory margin are immediately visible, and then decide the proportion of resources allocated to the amount of memory and disk depending on the situation - location of the resource store has a certain random sex.

Although not conclusive division rules, but according to the results observed in the daily development, at least we can conclude that such a law: resource deposit does not exist memory, the browser is adhering to the "saving principle."

Base64 format images, almost always can be stuffed into memory cache, which can be regarded as rendering the browser to save the cost of "self-protection act"
Small volume JS, CSS file, but also a greater chance of being written to memory - by contrast, the larger JS, CSS files do not have this treatment, and memory resources are limited, they are often dumped directly into the disk.

Service Worker Cache

Service Worker is an independent thread the main thread of Javascript. It is out of the browser window, and therefore can not access the DOM directly. Such independent personality makes Service Worker "personal behavior" can not interfere with the performance of the page, the "behind the scenes" can help us to achieve the offline cache, push messaging and network agents, and other functions. We use offline cache Service worker realization is called the Service Worker Cache.

Service Worker's life cycle, including install, active, working in three stages. Once the Service Worker is install, it will always exist, only to switch between active and working, unless we take the initiative to terminate it. This is an important prerequisite for it can be used for offline storage.

Here we have a real way, with insight about how Service Worker offline cache (see note comment) for us: we first insert is such a JS code entry document to determine and introduction of Service Worker:

window.navigator.serviceWorker.register('/test.js').then(
   function () { Console .log ( 'registration success' )     }). The catch ( ERR => { Console .error ( "registration failed" )     })

In test.js, we cache processing. Suppose we need to cached files are test.html, test.css and test.js:


self.addEventListener ( 'the install' , Event => { 
  event.waitUntil ( // taking into account the need to update the cache, the parameters passed to the open cached version     caches.open ( 'Test-V1' ) .then ( Cache => { return cache.addAll ([ // here designated for an incoming cached file name '/test.html' , '/test.css' , '/test.js'       ])     })   ) })
    

      
        
        
        
        





// Service Worker will monitor all network requests, generate a network request is triggered fetch event, we can achieve the interception of the request in the corresponding monitor function, and then determine whether there is a corresponding request to the cache, from a Service Worker object to take in the cache
 self.addEventListener ( 'fETCH' , Event => { 
  event.respondWith ( // try to match the value corresponding to the request buffer     caches.match (event.request) .then ( RES => { // If a match to the call Server Worker cache IF (RES) { return RES;       } // If there is no match to initiate this request to the server resources return FETCH (event.request) .then ( the Response => { IF (the Response |! ! | response.status == 200 ) { return the Response;         } // request is successful, the request is cached.
    

      
      
        

      
      
        
          

        
        caches.open('test-v1').then(function(cache) {
          cache.put(event.request, response);
        });
        return response.clone();
      });
    })
  );
}

Attention Server Worker of agreement is required to be https protocol as a precondition.

Push Cache

Push Cache Cache HTTP2 refers to the presence in the server push stage. This relatively new knowledge, applications are still in the embryonic stage, I found several websites did not find a suitable case to make specific introduction to you. However, the scope of application is limited does not mean unimportant --HTTP2 trend is the future. It has not been pushed by extension of this moment, I still hope that we can understand the key features of Push Cache:

Push Cache Cache is the last line of defense. Only in the case of the browser Memory Cache, HTTP Cache and Service Worker Cache no hits will go to ask Push Cache.
Push Cache is a cache present in the conversation stage, when the session is terminated, the cache also will be released.
As long as different pages share the same HTTP2 connection, then they can share the same Push Cache.

summary

Data storage solutions in addition to cache pages, as well as local storage. Cache section of knowledge, with "crushing, fast iteration" feature.

参考资料
HTTP/2 push is tougher than I thought

Original: Large column three data storage scheme of the browser: caching mechanism and caching policy