Chrome: Cache storage VS Disk cache

Posted: May 25, 2019

Most likely, you've heard of Cache storage API and Service worker which might be used for caching resources and serving them later from the cache. One use case for that is prefetching resources before users need them.

I've been working on a project which implements the described use case. A few weeks ago, Stefan created a task where he described an observation that the speed of delivering assets from Cache storage is low in some cases. So, I decided to verify that.

I created demo to compare Cache storage and Disk cache. The index.html needs to display N images. There is an option to precache them then embed into the page. The sw.js looks into the cache, if resources are there, they get served from the cache, otherwise, they get normally downloaded.

Tests were only performed in Chrome. If there is enough interest, I might perform them in Firefox too. All images had identical size but different names to make the browser request them again and again. Below you will see the best results of 10 tries.

Chrome Dev tools provides timing for every resource.

Information about all loaded resources can be downloaded as a HAR file. Then any language/tool can be used to analyze the extracted information. In every try I was looking at time of loading all images. So, when you meet min , max or mean , I refer to the time when all images were loaded.

For this test the image size was 1.5 Mb. In general, it is unlikely there are sites which load that many heavy images. It was more about curiosity.

Mostly, the browser spent time on downloading images. There is no clear pattern how the browser started to handle requests.

As I mentioned 10 tries were performed, so here is statistics about them:

min: 514.93 ms (represented in the above chart)

514.93 ms (represented in the above chart) mean: 755.43 ms

755.43 ms max: 1031.07 ms

In this case, the download operation didn't take that much time, but images waited to be queued. We can even see how the browser took images for processing (approximately 6 images in one batch).

Statistics about 10 tries:

min: 646.73 ms (represented in the above chart)

646.73 ms (represented in the above chart) mean: 1050.81 ms

1050.81 ms max: 1450.36 ms

Cache storage is a clear winner in this test.

For this test the image size was 31.3 Kb. This scenario has higher probability to be real than the previous one. I used images for tests, but it might be different assets (javascript files, fonts, images, css files etc), so some sites might load 30 assets on a page.

The download wasn't a problem any more but the waiting was.

Statistics about 10 tries:

min: 26.22 ms (represented in the above chart)

26.22 ms (represented in the above chart) mean: 34.1 ms

34.1 ms max: 40.84 ms

Again, the queueing operation took more time than any other operation.

Statistics about 10 tries:

min: 15.3 ms (represented in the above chart)

15.3 ms (represented in the above chart) mean: 22.89 ms

22.89 ms max: 28.97 ms

Now, Disk cache is a winner.

Again, it is almost unreal case, but I was curios why Cache storage was faster in the first test. It might have been a number of images or the image size. So, I took the image from the previous test and loaded it 100 times.

Again, the waiting operation dominated here.

min: 65.5 ms (represented in the above chart)

65.5 ms (represented in the above chart) mean: 78.54 ms

78.54 ms max: 90.51 ms

Again, the chart shows that the browser took the batch of 5-6 images and loaded them in parallel then took another batch.

min: 55.44 ms (represented in the above chart)

55.44 ms (represented in the above chart) mean: 101.84 ms

101.84 ms max: 142.45 ms

By comparing the mean Cache storage is a winner again. So, I assume it is more about an ability to serve requests in parallel.

Even tests were performed on localhost results differ between tries. Disk cache was slightly better in delivering a small number of assets, Cache storage was better in delivering lots of assets. At some point, it is a little bit unfair to compare Cache storage and Disk cache, the first one has more wide use and developers have access to API to control it. Anyway, Cache storage isn't slow as it might have looked when the task was opened.