独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Caching

Ever tried to improve the performance of an application? The first and foremost thing that comes to mind is caching. But there are several different ways and layers of caching. It’s important to understand the PROS and CONS of each approach and which can be combined. Often it’s dependent on the application-specific requirement and ease of implementation.

You can do caching both at the `front-end` and the `back-end`.

Frontend

Frontend caching refers to the use of caching techniques on the client side, rather than on the server side. Often developers aren’t aware of the frontend caching or ignore it. Frontend caching can be very powerful and is the easiest to implement. This can help to improve the performance of a website or web application by reducing the amount of data that needs to be transferred over the network. And when millions of users are there the burden of caching is shifted to that millions of users so it can scale infinitely.

Some common techniques for frontend caching include:

Here are some examples of size limitations for different types of browser caching in some popular browsers:

Google Chrome

Mozilla Firefox

Microsoft Edge

Safari

As you can see Firefox, and Edge is useless with such low limits. And disk cache has a greater limit than in-memory. Chrome being the most widely used, we are good. The size limit of 512MB for chrome is shared by all origins. When it gets full it uses the least recently used (LRU) eviction policy to clear the cache.

IN MEMORY CACHING

First, try to understand what does in memory means. Whenever you open up a website you see so many things, text, audio, and video. Definitely, they would need to be stored somewhere to display to you, they are stored directly in RAM hence called in-memory.

By default, most modern web browsers will cache a variety of resources that are requested and received during the browsing session. This includes resources such as HTML files, CSS stylesheets, JavaScript scripts, images, and other media files.

The specific resources that a browser will cache and the rules for caching them are usually determined by the HTTP headers and caching directives that are sent by the server along with the resource. For example, the “Cache-Control” header can be used to specify whether a resource should be cached, for how long it should be cached, and under what conditions it should be revalidated.

So how can I do in-memory caching except for the default behavior?

Using this you can configure and change the default behavior of in-memory caching. Let’s say we want to cache all ‘GET’ calls in-memory

Cache-Control is an HTTP header that can be used to control how and when a client caches particular resources. The Cache-Control header can be set on the server, and it specifies directives that tell the client how long a resource can be cached and under what conditions it can be reused.

For example, the following Cache-Control header specifies that the client can cache the response for a maximum of one hour.

This means that the client can reuse the cached response for any subsequent requests for the same resource within the next hour.

Here is a list of some common values for the “Cache-Control” header:

Pros:

It is easiest to implement like just a single line needs to be added on the server side to tell the browser to cache all GET calls.

Ultra-fast. Response time of 1–2 ms.

Cons:

It cleared on closing the browser.

Size is limited

Can’t cache ‘POST’, ‘PUT’, and ‘DELETE’ calls — This is on purpose because they are data modification calls, but there can be a rare scenario where you are using say ‘POST’ call as a ‘GET’ call since the parameters are very high in number and hence needs to be passed into the body. So ideally you would like to cache such a POST call but Cache-Control header won’t be able to help you with that.

2. Manual Caching

There are some limitations of Cache-Control headers and you don’t have full control. To have full control of what and how you want to cache you can cache manually.

Ex — you can even cache a POST call, though that would be a bad idea.

Here is an example of how you might implement in-memory caching in JavaScript:

DISK CACHING

You can use the localStorage API to store values in the user’s web browser so that they can be accessed even after the page has been refreshed. Here is an example of how you might use localStorage to cache API responses:

Of course, this is just a simple example to illustrate the concept. In a real-world application, you would need to consider factors such as cache expiration and data invalidation, and you would also need to handle errors and edge cases.

Therefore it’s best to use a sophisticated caching library or framework to manage your cache, rather than implementing it by yourself.

Axios is a popular JavaScript library for making HTTP requests. It is often used in combination with frontend frameworks such as React or Angular to fetch data from APIs or other web services.

To use Axios for caching, you can use the axios.create() method to create a new instance of the axios object, and then pass in a cache option with a value of true. This will enable the built-in caching feature in Axios, which uses the ETag header to determine whether a response can be cached and whether it is still valid.

Here is an example of how you might use Axios with caching enabled:

This will enable the built-in caching feature in Axios, which will automatically store the responses to successful GET requests in a local cache. Subsequent requests to the same endpoint will be served from the cache unless the response has changed (as determined by the ETag header).

In addition to the built-in caching feature, Axios also allows you to use custom caching adapters to implement more advanced caching strategies. An Axios adapter is a function that intercepts the outgoing request and incoming response and allows you to modify or manipulate the data in some way.

To use a custom caching adapter with Axios, you can use the axios.create() method to create a new instance of the axios object, and then pass in an adapter option with a reference to your custom adapter function. Your adapter function should accept a config object as an argument, and return a Promise that resolves with the modified config object.

Here is an example of a simple caching adapter that uses the lru-cache library to implement an in-memory LRU (least recently used) cache:

Another very simple to use adapter is axios-cache-adpater

To use axios-cache-adapter to cache requests, you need to install the package and create a new instance of axios with the cache adapter. Here is an example:

In the example above, we create a new instance of axios using the axios-cache-adapter package. Then, we configure the cache adapter to set the maximum cache size to 15 and exclude query parameters from being considered when caching requests.

Finally, we use the api instance to make a GET request to the specified endpoint. If the request is successful, it will be cached according to the configuration provided to the cache adapter. You can also use the api instance to make other types of requests (e.g. POST, PUT, DELETE) and they will be cached if the request is successful.

Note that the axios-cache-adapter package uses an in-memory cache by default, which means that the cached data will be lost when the application is restarted. If you want to persist the cached data, you can use one of the storage adapters provided by the package (e.g. local storage, indexedDB) or implement your own storage adapter.

Local Storage:

To use local storage with axios-cache-adapter, you need to install the axios-cache-adapter-localstorage package and create a new instance of axios with the local storage adapter. Here is an example:

local storage has limited capacity, so you should be careful not to exceed the available space when using this adapter.

Indexed DB:

To use indexedDB with axios-cache-adapter, you need to install the axios-cache-adapter-indexedDB package and create a new instance of axios with the indexedDB adapter. Here is an example:

The cached data will be stored in indexedDB and will be available even after the application is restarted.

Note that indexedDB is only available in modern browsers, so if you need to support older browsers you will need to use a different storage adapter or implement your own storage adapter.

Chrome and most of the chromium-based browsers allows 80% of the disk space to be used and from that 75% can be used by each origin. That means, If you have a disk space of 100GB then 80GB can be used to store data in indexedDB and from that 60GB can be used by single origin.

Also, Firefox allows 2GB data to be stored by each origin and Safari allows 1GB per origin.

Conclusion:

Using an external library to cache is easiest. Using IndexedDB for caching is best since it has no storage limit, local storage is limited to a meager 10MB, and In-memory cache is not persisted and cleared on browser refresh.

PROS and CONS of frontend caching:

Pros:

Cons:

Backend Caching:

In the example above, we create a new NodeCache instance and use it to set and get values in the cache. The stdTTL option is used to specify the time-to-live (TTL) for the cached values, in seconds.

2. File-based caching using fs-extra:

In the example above, we use the fs-extra package to create a cache directory and set and get values in the cache. The values are stored in JSON files in the cache directory, and are accessed using the specified key.

3. Distributed caching using node-cache-manager-redis:

In the example above, we create a new cache instance using the node-cache-manager and node-cache-manager-redis packages. We configure the cache to use the Redis store and specify the host, port, and database number for the Redis server. Then, we use the cache instance to set and get values in the cache.

Add a comment

What is your view?

Send

Related posts:

Taize meeting in Madrid

I went to Taize meeting in Madrid. We traveled by bus. That is sometimes painful for my bottom but it is also a nice opportunity to get to know each other, share some cookies, have fun together, hear…