Tips for optimizing AngularJS performance with large scopes

Currently, I am working on an Angular app for my company and have encountered a major issue. The app has become extremely slow, even after trying to optimize it using techniques like onetimebind and track by. Despite initial improvements, the performance is still lagging due to the presence of a large number of nested objects. To give you an idea, there are around 680 objects initially and this number can go up to over 6000 during regular use. Most of these objects belong to input fields which are constantly updated whenever the user interacts with them (clicks, types, etc.).

In addition to these objects, there are multiple arrays containing objects that dynamically change based on user choices. Adding new objects to these arrays significantly slows down the rendering process, even though I attempted using nested controllers to optimize updates at the child level. Surprisingly, this approach made the app even slower. Using ng-show instead of ng-if did show a slight improvement in speed but led to a sharp increase in memory consumption.

It's worth mentioning that the form follows a wizard style layout where only a subset of inputs is displayed at any given time, typically ranging from 10% to 20% of the total inputs available.

Has anyone faced similar challenges before? Any suggestions on how to manage large scopes efficiently?

Answer №1

Unfortunately, one downside of view rendering in Angular is that an update in the model can trigger a complete redraw of the entire view, regardless of whether certain elements are hidden or not. The bi-directional data binding feature can severely impact performance. You might want to consider if it's necessary to render the view multiple times, as optimizations can be made in such cases. However, if your form changes dynamically, then two-way data binding is essential.

One way to mitigate this issue is by encapsulating subparts of the MVC architecture. By doing so, only controllers within specific scopes will update the corresponding views.

If you're facing challenges with Angular's rendering pipeline, you may want to explore using React. React is designed to address issues like these and could potentially offer a solution tailored to your requirements.

To gain a better understanding of the differences in the rendering processes between Angular and React, you can refer to this blog post for a detailed comparison:

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 applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed: function testFormatter(cell, formatt ...

Creating a user-friendly form with validation in a Vue application using Vuetify.js

I am in the process of incorporating a contact form with basic validation on a Vue.js website using an example from Vuetify.js. Being new to this, I'm unsure about how to implement it within a Vue component. My goal is to have simple client-side form ...

Can you please elaborate on the concept of type coercion in JavaScript?

I've come across information stating that when comparing an object with a number, type-coercion occurs. ToPrimitive is called on the object which then invokes valueOf and, if necessary, toString. However, I'm struggling to understand how this pro ...

What is the process of exporting a module assigned to a variable in JavaScript?

My approach to making the require visible in <app></app> is as follows: index.html: <script> var electron = require('electron') </script> <app></app> <script src="bundle.js"></script> App.vue: ...

What causes my Excel file to become corrupted when inputting new data?

My intention with this code is to insert "ABC" into cell B3 of an existing Excel document. However, when the file is written, its size decreases significantly and Excel is unable to open it. const excel = require("exceljs"); const template = "./myexcel.xl ...

Obtaining the accurate offsetTop and offsetLeft values for an element following a CSS3 rotation

Is there a method to accurately determine the offsetTop and offsetLeft values of an element post-transform rotation? Are there any lesser-known element properties that could be helpful in this scenario? Attached is an image that can provide further clari ...

Executing a POST Request from AngularJS to a server-side script

Currently, I am in the process of developing a web application using Yeoman tools with AngularJS. However, I have encountered a challenge when trying to send a POST request to a server-side script from a controller. Below is the snippet of code from my con ...

Tips for positioning two elements side by side on a small screen using the Bootstrap framework

Greetings! As a beginner, I must apologize for the lack of finesse in my code. Currently, I am facing an issue with the positioning of my name (Tristen Roth) and the navbar-toggler-icon on xs viewports. They are appearing on separate lines vertically, lea ...

Tips for implementing a button redirection to a different page using React

I am facing an issue with a component that includes a function onClick in its Class.propTypes: onClick: PropTypes.func Within another component, I have used this particular component multiple times to populate a page. Each instance of these components con ...

Enhance Your Form Validation with jQuery UI Dialog Plugin

Currently, I am utilizing the bassistance validation plugin for form validation. I have set up a pop-up modal dialog box to contain a form that requires validation, but for some reason, the form is not getting called. I have checked all my ID's and re ...

Dynamic x-axis movement with interactive Google Line Chart functionality

I am struggling with implementing Google charts, After reviewing Real-time changing point chart with Google Charts, I realized it is not providing the solution I need. I aim to achieve a similar result as shown in this example: Is there a method for me t ...

Expanding the size of an array list item in React

I have an array containing various currencies: const currencies =['USD','EUR','AUD','CNY','AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'A ...

Encountering an issue while trying to set up fs-ext with npm: error C3861: the 'fcntl' identifier cannot be

I encountered an error while trying to install fs-ext on my Windows 10 64-bit machine with Node.js v8.1.3 and npm v5.4.0. Any recommendations on how I can successfully complete the installation? PS C:\users\desktop\auth> npm install fs-e ...

How to retrieve the ID of a parent sibling using jQuery DataTables

I have encountered a peculiar issue while trying to retrieve the ID of a table's parent sibling. Prior to initializing jQuery DataTables, obtaining the table's ID poses no problem. However, once it is initialized and the table is built, retrievin ...

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

I am attempting to attach the information from a .html file to the body of my main webpage. Essentially, I am striving to create a reusable section of html that can be loaded into any page with a basic JavaScript function. Below is the content of my navig ...

The Firefox extension is in need of Google Chrome for compatibility

Currently, I am developing a Firefox extension that displays SSL certificate details. My goal is to only view the certificate information without making any alterations. I am attempting to utilize this specific code example, however, the JavaScript code ha ...

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The initial code snippet is not functioning correctly DN.onkeyup = DN.onkeypress = function(){ var div = document.getElementById("DN").value document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; } #one{ heigh ...

Adjust the style of an element when hovering over a different element

Below is the HTML code in question: <div> class="module-title" <h2 class="title" style="visibility: visible;"> <span>Spantext</span> Nonspantext </h2> </div> I am looking to change th ...

Introducing the concept of type-specific name inclusion

I am currently developing my Angular app using TypeScript with the goal of preventing redundancy through some form of generic handling. Here is where I am starting: class BaseProvider { api_url = 'http://localhost:80/api/FILL_OUT_PATH/:id&apo ...

Set the class of an element dynamically using ng-class and detect changes with ng-change

I want the input field to initially have the class .form-control-error. When the user clicks on the field and starts typing, I would like it to change to .form-control-success. I attempted the following code but couldn't get it to update. The ng-chan ...