Avoiding Memory Leaks and Managing JS Heap Size While Polling Large Amounts of Data Every 5 Seconds with Vuex

I'm currently working on a Vue application that utilizes Vuex for state management. Within this application, I have several store modules set up at the root level. Periodically, every 5 seconds, I retrieve a large amount of data and update the store state using mutations from the store.

The issue I am facing is that with each mutation of the state, the heap size increases significantly. This growth continues until eventually the browser runs out of memory.

Here's an example structure of my store:

const store = new Vuex.Store({
  modules: {
   moduleA,
   moduleB
  }
})

Answer №1

Every element of the webpage's state, including the DOM and JavaScript/Vuex data, will stay in memory until a complete page refresh is performed in SPAs (especially with vue-router).

When working with SPAs, it is crucial to release any references (e.g., setting them to null) to large objects and arrays once they are no longer necessary so that the memory can be reclaimed by the garbage collector.

Prioritizing the deletion or freeing up of unnecessary objects and variables before exhausting the memory heap is essential for efficient performance.

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

In MongoDB and Node.js, encountered error: 'Unable to access property 'collection' as it is undefined'

I'm encountering a type error with my collection function that was previously functioning without any issues. This code was working perfectly in another project of mine. After reusing a lot of the code, I started experiencing this error. My MongoDB c ...

Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used. if ( $(".alert-box").height() >= 90 ) { $('.img').css(&apos ...

Ever since updating my jQuery version to 3.2.1, my ajax code seems to have stopped functioning properly

My program's ajax functionality was running smoothly with jquery version 1.7, but when I updated to version 3.3.1, the ajax part stopped working. I made sure to attach the ajax portion of my code after updating the jQuery version. In the PHP file, I s ...

Extract the value from JSON data

I am faced with the challenge of extracting the value of slug from each child in a JSON dataset. The issue lies in the fact that I cannot predict how many children will be generated whenever new data is received. The generation of nested children is dynam ...

Why does jQuery treat an integer as a string when adding it to a variable?

While working on a for statement, I encountered an issue with adding an integer to a variable that increments. Strangely enough, the addition operation treats the integer as a string. However, other operations like subtraction or multiplication behave as e ...

IE is giving an "Access is denied" message when making an Ajax request

I have implemented an AJAX request to check the response of websites like this: $.ajax ({ url: 'https://www.example.com', cache: false, success : function() { alert(new Date() - start) }, }) This code fun ...

How many times can vue.js v-for iterate through a variable?

Looking to loop through rows in a table using a range? Most examples show how to do this for a fixed value, like: <div> <span v-for="n in 10">{{ n }} </span> </di But what if you want to achieve this with a variable like below? &l ...

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

I am brand new to the concept of Test-Driven Development (TDD) and I am currently in the process of debugging a complex Angular 5 application for the company I work for. The application is functioning without any issues, but now I need to incorporate test ...

The canvas grid is malfunctioning and failing to display correctly

My current code allows me to draw a grid on a canvas with multiple lines, but I'm encountering an issue when trying to render 25 or more lines - some of them don't appear on the canvas. This problem becomes more noticeable when there are 40 or mo ...

Is there a way to specify both a fixed width and a custom resizable length for a Spring <form:textarea /> element?

Despite extensive research, I have yet to find an answer to my specific problem. Within a model window, I have a textarea element: <div class="form-group"> <label for="groupDescription" class="col-sm-2 control-label"> Descripti ...

What is the speed of communication for Web Worker messages?

One thing I've been pondering is whether transmission to or from a web worker could potentially create a bottleneck. Should we send messages every time an event is triggered, or should we be mindful and try to minimize communication between the two? ...

Utilizing asynchronous operations dependent on the status of a separate entity

Dealing with asynchronous operations in Vue has been a challenge for me. Coming from a C# background, I find the async-await pattern more intuitive than in JavaScript or TypeScript, especially when working with Vue. I have two components set up without us ...

What is the purpose of employing useMemo in the Material-UI autocomplete documentation?

My focus is on this specific demo in the autocomplete documentation. In the google maps example, there is a throttled function that is returned from a useMemo with an empty array as the second parameter. However, it raises the question of what exactly is ...

Refresh the HTML content within a specified div element

In my index.html, there is a graph (created using d3.js) along with some code that displays a stepper with a number of steps equal to the child nodes of the clicked node: <div ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.htm ...

Can Ember store in Route handle Post requests?

Is there a way to use ember store functionality similar to this.store.findAll('report') for making POST requests with postObj in my route? Also, how should I handle the response received from these requests? Right now, I am sending ajax POST requ ...

During rendering, the instance attempts to reference the "handleSelect" property or method which is not defined

I've incorporated the Element-UI NavMenu component into my web application to create a navigation bar using Vue.JS with TypeScript. In order to achieve this, I have created a Vue component within a directory called "navBar," which contains the follow ...

Unveiling the mystery: Locating the position of an element within a multidimensional array using JavaScript or JQuery

How can I retrieve the index of a specific element in a JSON array converted from a PHP array using json_encode, using JavaScript or JQuery? Initially, the user will choose an option where the values correspond to people's IDs. <select class="for ...

How to implement a form in PHP that doesn't refresh the page upon submission

I am having an issue with this ajax code. I know it works, but for some reason it's not submitting. <script type="text/javascript"> $(function(){ $('input[type=submit]').click(function(){ $.ajax({ type: "POST", ...

Linking a variable in typescript to a translation service

I am attempting to bind a TypeScript variable to the translate service in a similar way as binding in HTML markup, which is functioning correctly. Here's what I have attempted so far: ngOnInit() { this.customTranslateService.get("mainLayout.user ...

Unable to access specific data from the JSON string retrieved from the backend, as it is returning a value of undefined

After receiving a JSON string from the backend, my frontend is encountering issues when trying to index it post using JSON.parse(). The indexed value keeps returning as undefined, even though it's a JSON object literal and not within an array. For th ...