Exceptionally high memory usage detected in AngularJS

My AngularJS application is running into performance issues due to high memory consumption. There are around 200-250 repeated elements, each containing inner items with nested ng-repeats. The JS Heap memory allocation reaches up to 70MB, causing the webpage to crash and impacting other open tabs. Batarang flagged over 3000 Scope items with $id, which I reduced to 700-800 Scope items by restructuring directives. However, memory usage remains high without a noticeable improvement in performance. During profiling, clicking on the garbage collector icon reduces memory consumption by about 15 MB. I need guidance on how to debug this issue effectively.

UPDATE: The directive structure being repeated is as follows:

<li class="reminder-content">
   <wizards/>
   <editwidget></editwidget>
   <div style="font-size:87%;padding-left:5px;">{{::reminder.time| date:"shortTime"}} <span class="date-particulars">{{::reminder.time | dateFilter}}<span class="date-particulars-date">Reminder was set for <strong>{{::reminder.time | date:"longDate"}}</strong></span></span></div>
   <div class="reminder-body">
      <p class="{{reminder.trip.destination}}">{{::reminder.trip.destination}}</p>
      <p class="pad-top">{{::reminder.text}}</p>
      <p class="pad-top"  id="trav_name"><a href="{{::reminder.traveler.conversationLink}}" target="_blank">{{::reminder.traveler.name}}</a></p>
      <p>{{::reminder.wizard.id | customFilter:this}}</p>
   </div>
</li>



<reminder ng-repeat="reminder in reminders.delegatedReminders track by reminder._id| orderBy:'time'"></reminder>

Answer №1

ng-repeat is responsible for adding watchers, so it's important to optimize this by using 'one-way binding'.

For example:

ng-repeat="item in ::$ctrl.items"

Additionally, keep an eye out for similar constructions within templates, like {{smth}}. Consider using {{::smth}} instead.

Avoid using $watch, $broadcast, and $emit. Always opt for '<' over '=' as bindings. If you're working with Angular 1.5+, take advantage of lifecycle hooks.

$onDestroy() {
  // your code
}

Answer №2

Here is a method to accomplish this:

//capturing the results from $watch function
var deregister = $scope.$watch('yourModelValue', function(){

    //your code here
});

//Removing watch on destroy event
$scope.$on('$destroy', deregister);

//Alternatively, you can handle multiple watches like this

$scope.$on('$destroy', function() {
   deregister();
 });

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

When using GTM dataLayer .push, a fresh object is generated rather than simply appending it to the current dataLayer

I am in the process of setting up a dataLayer for my website, but I have encountered an issue. My understanding is that Google Tag Manager dataLayer functions in a way where you have one central dataLayer object containing all the data variables. Each tim ...

Issues arise when Angular Meteor fails to load the UI-Router properly

Currently, I am exploring the integration of ui-router for routing within a meteor-angular application. My reference point is the meteor Whatsapp tutorial which can be found here Below is the relevant code snippet related to ui-router implementation: log ...

How to Dynamically Update Sass Styles with Webpack 2?

Currently, I am in the process of setting up a React application that utilizes Webpack2, webpack-dev-middleware, and HMR for the development phase. One peculiar issue that I have encountered is related to updating .scss files. When I make changes to my .sc ...

Modifying specific attributes of an object within the $scope: A step-by-step guide

When working with Angular, if you have code in the view that looks like this: <span ng-model="foo.bar1"></span> <span ng-model="foo.bar2"></span> <span ng-model="foo.bar3"></span> Due to how Angular maps objects, you c ...

Using React-Router-Config to dynamically set the page title

I am seeking advice on how to dynamically set page titles using the configuration file in conjunction with react-router-config. Should I use props or Helmet for this purpose? routes.js const routes = [ { title: 'Home', path: ...

Tips for fixing the error "Unhandled error: state.set is not a function"

My code is utilizing immutable.js in the reducer, but I keep encountering an error stating 'state.set is not a function'. Interestingly, when I modify the code to exclude immutable, the error disappears. import React from 'react'; impo ...

Fetching elements using Python Selenium with JavaScript

I am attempting to retrieve lists in Python Selenium using JavaScript as shown below lists = browser.execute_script("document.getElementById('permalink-overlay').getElementsByClassName('u-dir')") However, I am receiving an error in th ...

Is there a way to troubleshoot a webpack-compiled npm module effectively?

Looking to debug an npm module compiled with webpack by setting breakpoints and stepping through the code? The issue may arise when importing the module locally using npm link, as only the compiled code is accessible for debugging from the application. W ...

Examine the syntax of JavaScript

I've been digging into a piece of code written by another person. My focus is on uncovering the JavaScript function that executes when the link below is clicked.... <a href="#subtabs_and_searchbar" id="finish_counting" onclick="$(' ...

Exploring nested JSON data in Vue.js

In my attempt to access nested JSON within an array using Vue for a simple search functionality, I encountered a problem. Each school is encapsulated in a "hit" array, causing the system to perceive only one result of "hit" instead of returning data for ea ...

Rotating images on a canvas

We're currently implementing Ionic and Angular in our project. One issue we are facing is regarding image rotation on canvas. When we click on an image, the rotation works perfectly if it's a jpg file. However, when we pass a base64 image, the r ...

Troubleshooting a Problem with the Horizontal Scrollbar in Dynamic jqGrid

Currently, I am working on an ASP.net MVC project where I have implemented both dynamic and static jq grids. However, I am encountering an issue with the horizontal scroll bar in my application. To address this problem, I attempted to modify the overflow ...

Customize Your Lightbox Fields with DHXScheduler

In my JSP application for exam timetabling, I have integrated DHXScheduler and customized the lightbox to display additional information about exams using my own fields. The EventsManager class is responsible for managing events by saving, creating, and r ...

How can I use JavaScript to create a drop-down menu that only appears after selecting the previous one?

<div class="row"> <div class="col-md-4"> <label for="selectCustomers">Customer Select</label> <select class="form-control pointer" name="tableCustomers" id=" ...

The absence of req.body in the app reflects an undefined state

I'm encountering an issue with my app and I believe showing you my code is the best way to explain the problem: var Meetup = require('./models/meetup'); module.exports.create = function (req, res) { var meetup = new Meetup(req.body); c ...

What steps do I need to take to retrieve data in a JSON array based on its

Hello, I could really use your assistance with a problem I'm having. Here is the scenario: I have a JSON array that looks like this: "category" : [ { id: 1, product: [{id : product_1, type : ball}] }, { id : 2, product :[{id : prod ...

The useState setFunction does not alter on OnClick events

My useState element is causing issues because the function doesn't get called when I click on it. I've tried multiple solutions and debugging methods, but it seems like the Click event isn't being triggered no matter what I do. const [moda ...

CSS not being properly rendered on newly inserted row within table via jQuery

I'm currently working on a table that allows users to select rows, and I've implemented some CSS to highlight the selected row. The issue arises when new rows are added to the table as they do not get highlighted when selected. HTML Portion: &l ...

Removing an individual HTML element within a form using JavaScript Fetch() in the presence of multiple components

The Situation Having a form that includes image components generated from a MySQL database with PHP, I've implemented javascript fetch() functionality on different pages of the website to enhance user experience. However, in cases where the functiona ...

What is the best way to manage a promise in Jest?

I am encountering an issue at this particular section of my code. The error message reads: Received promise resolved instead of rejected. I'm uncertain about how to address this problem, could someone provide assistance? it("should not create a m ...