author ：JerryC

link ：https://juejin.cn/post/7088741970696208414

although ServiceWorker and PWA Is becoming a modern Web Application standards , But browser resource caching has become more complex than ever .

This article covers the key content of browser caching , Specific include ：

1. ServiceWorker Caching and HTTP Cache priority ？
2. Implemented by mainstream browsers MemoryCache and DiskCache On which floor ？
3. MemoryCache、DiskCache、ServiceWorker Which cache is faster ？

Cache process overview

Let's first look at the order of resource requests defined by the standard ：

4. ServiceWorker cache ：ServiceWorker Check whether the resource exists in its cache , And decide whether to return resources according to its programmed cache strategy . This operation will not happen automatically , Need to register in ServiceWorker In the definition of fetch Event to intercept and process network requests , So you can hit ServiceWorker Cache, not the network or HTTP cache .
5. HTTP cache ： Here is what we often say 「 Strong cache 」 and 「 Negotiate the cache 」, If HTTP If the cache has not expired , The browser will use HTTP Cached resources .
6. Server side ： If ServiceWorker Caching or HTTP No resources found in cache , The browser requests resources from the network . This will involve CDN The work of the service or source service .

This is the standard defined resource request process , But browsers with pursuit will still be in ServiceWorker Add a layer on top 「 Memory cache layer 」 , With Chrome For example , We request a resource , Remove the network , There are three browser caches that return ：

that MemoryCache and DiskCache And ServiceWorker Cache What is your priority ？

Now let's talk about the differences between the three .

MemoryCache、DiskCache At which layer of the cache process ？

We use Chrome For example ,MemoryCache As a first citizen , be located ServiceWorker above .

That is, hit MemoryCache, It won't trigger ServiceWorker Of fetch event .

and DiskCache Is located in the original HTTP Cache layer ：

MemoryCache The existence of can lead to a problem ： ServiceWorker You don't always have control over resources . This will make the situation we had expected complex and unpredictable . It is a pity MemoryCache It's not in W3C In the standard of ,W3C from 2016 This matter is still being discussed in , It seems that this problem cannot be solved in a short time .

Some topics under discussion ：

1. safari fetches from memory cache instead of Service worker
2. Difference between disk and memory cache
3. Advanced Questions About Service Worker
4. allow service worker produced resources to be marked as "cachable"

Is there really nothing we can do ？

If we encounter a business scenario , Indeed. ServiceWorker There are strong requirements for resource control , We can still do something .

MemoryCache Is controlled by 「 Strong cache 」 Of , This means that we can be in ServiceWorker Intercept the response of the resource , And set the resource response header to make the resource from MemoryCache invalid ：

cache-control: max-age=0
 Copy code 

self.addEventListener("fetch", (event) => {
event.respondWith(
(async function () {
//  from  HTTP  Cache or network access resources 
const res = fetch(event.request);

//  because  Response  Is a stream , It can only be used once , So here it is  clone  once .
const newRes = res.clone();

//  Rewrite the resource response header 
return new Response(res.body, { ...newRes, headers: {
'cache-control': 'max-age=0'
}});
})();
);
});
 Copy code 

It should be noted that , This method is based on the premise of sacrificing a small amount of loading performance . It depends on the performance priority in our actual scenario , Or offline first , Or whatever else is preferred .

MemoryCache、DiskCache、ServiceWorker Which cache is faster ？

Let's take another look at the loading speed and priority of three caches of the same resource ：

1. Loading speed ：MemoryCache > DiskCache > ServiceWorker
2. priority ：MemoryCache > ServiceWorker> DiskCache

MemoryCache The priority is ServiceWorker front , This is OK .

But slower ServiceWorker Priority is faster than speed DiskCache Higher ？

That dish down ,ServiceWorker Isn't it slowing down the loading speed of the site ？

Controlled experiment

To study the problem , I did a set of controlled experiments .

The experiment is only in Chrome Conduct ,chrome devtool Provide time for each resource . All information about loading resources can be used as HAR Download the file , Then write a local script for information extraction and Analysis .

experimental condition

1. The same environment ：Chrome97 / MacOS 10.14 / Wifi

2. Multiple concurrent loading of the same picture ：

   1. 3 Zhang 133KB picture 10 Experiments
   2. 10 Zhang 133KB picture 10 Experiments
   3. 100 Zhang 133KB picture 10 Experiments

3. Observe two properties ：

   1. DiskCache Cache performance
   2. ServiceWorker Cache speed performance

Experiment 1 ：3 Zhang 133KB Picture concurrency

The first is concurrent requests 3 Picture for 10 Experiments , Take the average data , Then observe DiskCache、ServiceWorker Cache Performance of .

Observe ：

1. DiskCache： We found that the download operation didn't take much time , But resources are waiting in line .
2. ServiceWorker Cache： More time-consuming downloading .

Conclusion ： But nonetheless , In this case , DiskCache Still better than ServiceWorker Cache faster .

Experiment two ：3 Zhang 133KB picture 10 Experiments

When I add concurrent images to 10 Zhang , This situation may be closer to the actual situation , There may be more different resources in the site （JS file 、 typeface 、 style 、 Image, etc ）, Because some websites may have more than one page 10 A resource .

Observe ：

1. DiskCache： The queue time from the second resource is still very long , But the download time is basically the same .
2. ServiceWorker Cache： Queuing is not a problem , But waiting is .

Conclusion ： In this case , DiskCache Will be slightly inferior to ServiceWorker Cache.

Experiment three ：3 Zhang 133KB picture 100 Experiments

When I add concurrent images to 100 Zhang , This situation is almost untrue , But I wonder why DiskCache Why in the first experiment than ServiceWorker Cache faster .

Observe ：

1. DiskCache： Queuing is still a problem , And with the number of concurrency increases linearly . We can even see how the browser loads images , One concurrency is about 6 A picture .
2. ServiceWorker Cache： Although the waiting time increases with the number of concurrency , But it's gentle .

Conclusion ： At the same time ServiceWorker Cache Than DiskCache faster .

that DiskCache and ServiceWorker How to choose ？ Children make choices , Adults have to

because ServiceWorker The priority is DiskCache above , We can do it in ServiceWorker Conduct 「 Resource race 」, Request at the same time ServiceWorker Cache and DiskCache, Which one returns first will return the resource to the upper layer . The code might look like this ：

self.addEventListener("fetch", (event) => {
event.respondWith(
(async function () {
const res = Promise.race([
//  request  ServiceWorker Cache
cache.open(CACHE_NAME).then(cache => cache.match(event.request)),
//  request  DiskCache  Or network resources 
fetch(event.request)
])
})();
);
});
 Copy code 

Experiment four ： After the resource race , Concurrent request 3 A picture 、10 A picture and 100 A picture

When we race for resources , In this case , Whether it's a small amount of concurrent resources or a large amount of resources , Can reach the fastest level .

summary

In this article, we understand ServiceCache、MemoryCache、DiskCache The priority of the .

Then I made an in-depth comparison ServiceWorker Cache and DiskCache Performance of .

When a small amount of resources are concurrent ,DiskCache faster , When a large number of resources are concurrent ,ServiceWorker faster .

Finally through 「 Resource race 」 To take into account both situations .

however , At some point , We compare ServiceWorker and HTTP Caching is a little unfair .

ServiceWorker Will be more widely used , It provides finer cache control 、 Make the application offline 、 And compare the main thread , He can use more CacheAPI Capacity .

At the end

In recent years , stay AIOps In the context of the rapid development of the field ,IT Tools 、 Platform capabilities 、 Solution 、AI The urgent need for scenarios and available data sets burst out in various industries . Based on this , Cloud wisdom is 2021 year 8 Month issued AIOps Community , It aims to set up a banner of open source , For customers in various industries 、 user 、 Researchers and developers build an active user and developer community , Jointly contribute and solve industry problems 、 Promote technological development in this field .

The community has ** Open source A data visualization layout platform -FlyFish、 Operation and maintenance management platform OMP、 Cloud service management platform - Moore platform 、Hours** Algorithms and other products .

Visual editing platform -FlyFish：

• Flying fish demo address
• Github Project address
• Gitee Project address
• 15 A large screen case of the industry

Some large screen cases ：