CODEWITHSUNDEEP
javascriptcachingfetchbrowser-cache
Josh Powlison
Josh Powlison

Reputation: 789

Is counting on fetch to use the cache a bad idea?

I'm fetching a static file. What are the downsides (if any significant ones) to fetching the same file multiple times instead of saving it in a local variable?

function getInfo(){
    fetch(src);
}

getInfo();
getInfo();
getInfo();

(Obviously I'm not running the same function 3 times in a row like this, but I do have a static file that's fetched often.)

  1. Does fetch make any sort of call to the server even if the file's been loaded locally?
  2. If so, is there a way to prevent that?
  3. Is there a significant speed difference between using fetch and using a local variable for my large, static text files?

If I'm doubling up on space unnecessarily by saving static files from fetch into variables, I'd like to not do that. But if I'm just being lazy and it impacts server requests and speed significantly, I want to know that.

In Chrome, the console shows that the fetched file is cached and file will be grabbed from the cache if fetched again. I know other browsers may differ in how they handle fetch requests.

Anybody here deeply familiar with this? Does this vary a lot among browsers? Is there anything in the specs that would explain this?

Upvotes: 3

Views: 1840

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1075129

In Chrome, the console shows that the fetched file is cached and file will be grabbed from the cache if fetched again. I know other browsers may differ in how they handle fetch requests.

This shouldn't, in general, be browser-specific other than the browser expiring cached data if it runs out of cache space (different browsers may have different algorithms for choosing what to expire).

Does fetch make any sort of call to the server even if the file's been loaded locally?

Whether the resource is re-requested or re-verified or satisifed entirely loally depends primarily on its cacheability, which depends on the caching headers you return with the resource from the server (Expires, Cache-Control, etc.). You can use those headers to say that the file should never be cached (by the browser, by proxies between the browser and server, etc.), or that it should be cached forever, or somewhere in-between.

If you ensure that the cache headers say the resource is cacheable for the period of time you want it cached, then you can expect the browser to respect that, provided it doesn't run out of cache space.

If so, is there a way to prevent that?

Yes, set cache headers.

Is there a significant speed difference between using fetch and using a local variable for my large, static text files?

Well, naturally the local variable is going to win dramatically in relative terms, near-zero time vs. at least a function call and check to see whether the item is cache and whether, if so, it needs to be re-validated or re-requested. But that's unlikely to be significant in absolute terms.

If I'm doubling up on space unnecessarily by saving static files from fetch into variables, I'd like to not do that.

You will be in at least some sense, if the resource is cacheable, because the browser will cache it and you'll have a copy loaded as a string referenced by your local variable. But the browser's cached copy may be in persistent storage (loosely, "disk"), not in RAM, and it will get pushed out of RAM if necessary to make room for other cached items. Browsers typically use up to a fixed amount of RAM for their cache, so this item specifically probably won't increase the amount of RAM cache the browser uses.

Probably worth noting that you can use a service worker to insert your own code between the request and the browser cache.

Upvotes: 2

Lajos Arpad
Lajos Arpad

Reputation: 76884

When you load a file from the server, your browser sends a request to the server and loads its content into memory. This can take a lot of time.

If your browser caches the file, then, instead of sending a request to the server, the cached file is loaded into memory. This is also time consuming, but not as much as in the case of waiting for the response of the request.

You do not control the cache system of the browsers, so you will not know whether the file will be cached at all and if so, for how long will it be cached.

If you load the file into memory and reuse it, then it will be much quicker. Since we are talking about a file, you can make its contents to be wrapped into a function, so, instead of resending the request, you will just call the function if it is defined. The algorithm is to check whether a certain function exists. If so, call it, if not, load the file. If the file is cached, then it will be loaded from the cache. Otherwise, a request to the server will be sent.

Upvotes: 1

Related Questions