Browser Cache

[00:00:00]
>> Another thing to know about the browser, because we are talking about how the browser works, is the Cache. So, typically, or originally, we developers, we hated the Cache. So, it's like, in fact, let me see if this is still working. It was working like a year ago or in the past ten years.

[00:00:23]
When you were doing a search on Google and you search, for example, php no, let's see, yeah, there it is. Now it's the second one. It was originally the first one, no cache. So the most searched thing is how I disable the cache. So you use a back end server know.

[00:00:42]
And the next thing is, I don't want to cache. Why, because you we don't manage the cache initially. So we are scared of things, we don't manage. So it's like, I don't know what's going on. So I don't know if it's a cache problem, this is browser it my users' browsers are caching data that I don't want, then I'm not going to send the user the right message or the right content.

[00:01:07]
So we typically say no to the cache. Well, we need to make cache a friend, okay? So how the cache works? And typically, we will focus on caching on the, resource discovery queue, okay? So we have a resource discovery queue. So now the browser is parsing the HTML, but now the browser knows that it needs to download a CSS, an image file, a JSON file, an SVG file, it has a list of elements to be downloaded.

[00:01:41]
So, what happens is that in this case, the browser will check the cache to see if we have a version of that file or not. And how does that work? You know how that works, how the cache works. So is that is the browser making the decision about what to cache and for how long who makes that decision?

[00:02:08]
Well, actually us, and the problem of not knowing the cache is that we are not making any decision. Okay, so actually we will define cache headers per file. Sometimes it's not per file, but per type of file for all the CSS files, or for all the CSS files in that folder, etc.

[00:02:33]
We can define an absolute typos again, absolute expiration date that was actually said in the original 1.0, HTTP protocol, we can set the relative expiration date. I will give you examples in a second, That was added in 1.1. And there are more specs, more values that we will see, but the original ones are these two.

[00:03:05]
Absolute expiration date means when the server is given to the browser a CSS file. In the headers, we add one that says, that CSS file expires May 21st of 2024, at 4PM Pacific time. Then the browser will save the file. In the users local storage in the user's device, let's say until that day. It does not work like that but okay makes sense? And relative expiration date means I want this file will last for an hour or for two years, or for one month.

[00:03:52]
And then the browser will calculate the real expiration date, okay? So now, let's say the browser needs a resource. So first, it checks. The cache. It can be a cache miss, or a cache hit, a miss means it's not there. And that simple if it's not there, okay, we go to our network as usual.

[00:04:21]
Business as usual. If it's a cache hit, okay, it means the file that we need is the cache okay. So it will verify if it's expired or not. Let's say it's expired, it's not expired. If it's not expired, we will say, well, let's use it from the cache.

[00:04:45]
So we use the file from the cache. We don't go to a network. So we don't have the HTTP request. We don't have the latency for that request. We don't need to wait for the server to respond or to get the bytes. Okay, we have the file. What happens if it's expired?

[00:05:05]
So we have the file, but it's expired. What do you think that will happen?
>> Goes to the network.
>> It goes to the network,
>> Delete it from the cache first.
>> Delete from the cache first. Let's say, kind of, and a no. It's not going to delete it from the cache.

[00:05:24]
It's going to the network, but not for what you're expecting. It's making what is known as a conditional request. It will say, hey server, for that CSS file, I have a version, and what do I do with that? And the server can respond with not modified, that means the file you have is okay, go ahead with that. Here, in the server, we didn't change it.

[00:05:55]
So let's keep it and it can attach updated cache headers such as keep it move your expiration date for two months. Or you can say no the one you have is gone. So I'm going to respond with an OK and a new file. HTTP 200, okay? Which seems like not so bad, the conditional request.

[00:06:20]
The problem of the conditional request is that it's waiting an HTTP request, it needs to go to the server. So the overhead for a conditional request is still almost as the same as making the normal request from scratch. So typically we wanna avoid conditional requests because it's not adding any value there.

[00:06:42]
The idea originally was good, probably, but in the real world, it's like making a normal request. It takes the same amount of time, we need to go to a server and the whole overhead is there, okay? Makes sense? So we need to understand this, and then use this in our favor.

[00:06:59]
How, we need to maximize the opportunity of always having the file on user's devices. If we do that, we will improve performance, because performance is about user's perception. Okay, so yeah, the problem is that I know, but yeah, but I have my manager here that she always wanted to keep fresh the data so we need to push always the latest version just in case we change the CSS with the color.

[00:07:27]
but performance is more important. So we need to find a way to go over that and there are design patterns to do that so it's always better to set static resources with a far late expiration date. It will last for 60 years. It doesn't matter. And it's, you're not going to waste users' space because browsers will delete your, they have their own expiration rules for that.

[00:07:54]
So it's, you shouldn't care too much about, okay? Do you have any question about how the browser's cache work?
>> So I guess just like differentiate between caching, like passwords and username, like login info, would that really be the only thing that you'd want to have, like a more set?

[00:08:16]
>> Yeah, in this case, the browser's cache is a separate storage compared with other storages that you have. If you're interested in how that works and all the storage, I have another workshop on Frontend Masters on storage APIs. So if you check that one with more information about storing credentials and databases.

[00:08:41]
And the next I think it is exactly what we are going to see in a second.