What is the optimal amount of memory for caching objects in the Browser?

As someone new to frontend engineering, I may not have all the answers and apologize if my question sounds too simplistic.

My application makes use of AJAX to fetch 4k JSON objects. To avoid making repetitive HTTP requests, I store the returned JSON in a global window object for caching purposes. Are there any recommended practices when it comes to handling this type of situation?

I understand that determining an appropriate size limit for the cache will vary based on factors such as the browser, operating system, hardware, etc. My main concern is maintaining optimal UI responsiveness.

Do you have any general guidelines or best practices to share regarding this matter?

Answer №1

The answer to this question really hinges on the specific task at hand and the number of users you are targeting.

For example, if you're developing a 3D game, then having a file size of 500MB may be acceptable (though not all should be allocated for JSON cache).

In general, modern browsers typically require about 50-100MB of memory to operate smoothly. Therefore, dedicating around 50MB for all your JavaScript objects should suffice in most scenarios. For simpler web applications like Twitter or Gmail, even 50MB is usually more than enough.

Additionally, the cost of RAM is currently around $5-7 per gigabyte.

It's important to consider that 4k of stringified JSON will translate into approximately 10-50kb when converted into objects, and even as a string it will occupy nearly 8k (assuming you're using utf-8 for HTTP transfer). This is because JavaScript engines use UTF-16 for their internal string representation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React application encountering promise instead of JSON data object

My current task involves querying an API that is expected to return a JSON object containing books based on the user's query. However, I am encountering a problem where instead of receiving the JSON object in my code, I am getting a promise. Upon in ...

Parse the JSON string into a list of C# objects when the string is received as NULL in the request

I'm currently working on a code snippet that converts a JSON string into a list of objects: public class rest_all { public string restaurants { get; set; } } public class rest_all_data { ...

Having trouble retrieving the values of checked items in checkboxlist using JavaScript

Within my application, there is a checkbox list. The following HTML code showcases the structure of the checkbox list along with the VB code responsible for binding it upon loading the respective page. <asp:CheckBoxList Runat="server" id="chklistTeams" ...

Pass data from a child controller to its parent using $emit

My goal is to pass values from dropdown lists and input fields in the FirstController to the MainController, and values from datepickers in the SecondController to the MainController. I have been attempting to use $emit and $on but without success. It&apos ...

Receiving the JSON information from an AsyncTask and passing it to the main activity

During my activity's onCreate method, I am executing an AsyncTask as seen below: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); new PizzaCustomizeAsyncTask(ActivityPizzaCustomize.this, null).exe ...

AngularJS powered single-page web application featuring a Facebook share button

I found a helpful post on deploying the Facebook share button in my app from Hyperarts. You can check it out here: However, I encountered two issues while trying to implement this feature. First, I struggled passing post.id and post.caption to the Faceboo ...

What is the best way to guide new visitors to a different webpage?

Is there a way for me to track if my landing page URL has been visited by a visitor on my site? And if not, can I automatically redirect them to it? I'm facing an issue where I want new visitors to see my landing page first, but this doesn't hap ...

When the class changes, V-for re-renders every component

Currently, I am in the process of changing classes for images based on their index using the moveIndex method and key events. While this works smoothly on computers, it seems to take significantly longer when implemented on TVs. The process runs smoothly w ...

Guidelines for verifying user identity using the Context API

I am facing issues with logging into my application using the Context API. Whenever I try to run the application without any token in the localStorage under the variable session, I encounter numerous errors like the one shown below: Uncaught TypeError: Can ...

What is the method to deactivate all events in React components using refs?

Currently, I am utilizing TreeView from Material-ui along with a text field for searching other items on the screen. Although TreeView and TextField are unrelated components. However, I have encountered an issue where if I click on a TreeView node and the ...

Having trouble showing Firebase data on a basic Vue application

I've been working on a simple Vue+Firebase application that allows users to send strings to the Firebase database and have the messages displayed using the "v-for" directive. However, I keep encountering an error message stating: Property or method " ...

Optimize Google Places Autocomplete: Customize the way search results are shown after selection (display only street name and number)

Struggling to update Google's autocomplete input value to only show the selected "streetname number" instead of the full address. It works when the user hits enter, but the value changes back when the input field loses focus. Looking for a simple sol ...

What is the best way to extract a Key from a JSON Object by using Retrofit?

Is there an efficient way to extract a key from a JSON object using Retrofit? In my POJO model, I have defined two different keys - "uid" and "name". public class Account { @SerializedName("uid") @Expose private String uid; ...

"Node NPM encounters difficulty in importing package using only its name and not the complete path

Currently facing an issue with my newly created Node Package while trying to share a project I'm working on. Specifically, I am encountering difficulties with the require statement. Project: https://github.com/kcjonson/indigo The problem lies in req ...

Pagination in AngularJS that allows users to easily "jump to page"

Looking to enhance my pagination function by adding a textbox and button for users to input the desired page number. Any ideas or reference links on how to go about this? Thanks in advance! Here's my current HTML: <div class="pagingDiv"> <b ...

Strategies for substituting text within div elements with exclusive values sourced from a particular index across numerous nested arrays

I am currently working on a function that iterates over an array containing nested arrays and updates the text within certain divs with the value located at index 1 of the nested arrays. However, there are specific conditions that need to be met: The nes ...

The jsx file is not being parsed by Webpack

In my current project, I am working with a JSX file that contains React code. import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render () { return <p> Hello React!</p>; ...

Utilizing React to bind "this" to a method within a class

Currently, I am immersed in a React book that suggests binding methods like this: this.onClickMe = this.onClickMe.bind(this); However, the functionality seems to work perfectly fine without including the above code snippet. class ExplainBindingsComponen ...

Having trouble loading a JSON file in three.js?

I have been trying to load a JSON image in Three.js by following a tutorial video. However, despite copying the code exactly as shown in the video, I am not able to see anything in the browser when using my own images. The JSON file is downloaded from clar ...

Tutorial on inserting a picture into muidatatables

Important Note: The image stored in the database is called "profileImage." I am looking to create a dynamic image object similar to other objects. When I input this code: { label: "Image", name: "profileImage" }, it simply displays the image endpoint as ...