Challenges with optimization in AngularJS and Angular Material

Currently, I am working on an AngularJS application that utilizes 7 Angular Material tabs. One issue I have encountered is a significant amount of animation lag when switching tabs or opening a md-select element. According to Chrome Developer Tools, the frame rate drops between 10-30 fps at best.

I believe this performance issue stems from the abundance of md-option elements being generated by the ng-repeat directive within the numerous md-selects present throughout the application. A quick check using 

document.getElementByTagName("md-option")
in the console revealed around 1000 DOM elements created for these dropdown lists.

Is there a way to enhance the speed of ng-repeat specifically within md-selects? Can md-virtual-repeat be utilized as a replacement to optimize the rendering of these dropdown menus?

In addition, all static text on the page is sourced from a language file, and I have come across the suggestion to use {{ ::variableName }} syntax to prevent unnecessary angular watches on those models.

Further, each tab loads its HTML content through ng-include="path/to/htmlFile". Are there alternative methods that could improve the efficiency and loading speed here?

<md-tab ng-click="nextTab($event)" label="{{lang.tabPD}}" md-on-select="vm.tabName='tabPD'" md-no-pagination="true">
   <div ng-include="'app/modules/partials/tabPD.html'" ng-controller="PDCtrl"></div>
</md-tab>
<md-tab>
...another div with ng-include
</md-tab>
etc

Any insights or recommendations you can offer would be greatly appreciated.

javascriptangularjsangular-material

Answer №1

There are multiple solutions available that could significantly enhance your performance.

  • Consider using md-virtual-repeat instead of ng-repeat

  • You can place each tab under a separate ui-view, setting the root tab container state as abstract:true and the tabs as children. This approach should reduce the DOM size such that only one tab is rendered at a time.

  • If you find that md-select is consuming too many watchers, try creating an Item component in React**. This method has proven to be efficient for faster performance.

Below is an example of tab routing structure from my code:

.state('sidemenu.activity-drill', {
url: '/activity-drill/:id',
abstract:true,
views: {
'content': {
templateUrl: 'views/activities/activity-details.html',
controller: 'ActivityDetailsCtrl'
}
}
})
.state('sidemenu.activity-drill.chat', { url: '/chat', templateUrl: 'views/activities/activity-tab-chat.html'})
...
(more tab states listed here)
...
.state('sidemenu.activity-drill.angular2', { url: '/angular2', templateUrl: 'views/activities/activity-tab-angular2.html'})

Structure of Tabs:

<md-tab ng-repeat="tab in activity_details_tab_position" ui-sref="{{tab.route}}">
<md-tab-label >
<span translate="{{tab.name}}"></span> 
</md-tab-label>
</md-tab>
</md-tabs>

<div ui-view></div>

Example of Virtual Repeat:

<div>
<p>{{(meeting.timestamp_start * 1000)| date:'EEE dd MMM'}}</p>
<p>{{((meeting.timestamp_start * 1000) | date : 'HH:mm')}}</p>
</div>

<div>
<div layout="row">
<span >{{meeting.meeting_name}}</span>
</div>
</div>
</div>
</md-virtual-repeat-container>

I hope this information proves helpful,

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

Click on a row in ReactTable to toggle the background color or expand the row

Is there a way to toggle the row background color in ReactTable when it is expanded? I have tried using onExpandedChange but haven't had any success. Any suggestions on how to achieve this would be greatly appreciated. Thank you! https://i.sstatic.ne ...

javascriptreactjsreact-table

Validation is not being enforced for the input field labeled as 'name' in the form

Can anyone assist me with a form validation issue I'm encountering while working on my project? The validation is functioning correctly for email and institution fields, but it seems to be ignoring the name field. Any suggestions or help would be grea ...

javascripthtmlformsvalidation

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson

Is there a way to retrieve the width of the parent element in ReactJS from a child component?

The issue has been fixed: I forgot to include .current in my ref... I am trying to determine the width of the element that will hold my component. I came across a solution on SO, but unfortunately it did not work for me as it returned undefined: import R ...

javascriptreactjscomponents

Tips for successfully passing multiple variables to the onload function within an Angular ng-include

I am facing a challenge in my Angular application where I need to pass two variables to a template. Here is what I have been trying: <div ng-include="'myTemplate.html'" onload="{obj: someObject, value: value}"></div> Unfortunately, ...

javascriptangularjsrecursion

I need to update a JSON file on the server by adding a new object to the existing array using the fs.appendFile function

I have a JSON stored on the server like this: [{"a":1}, {"a":2}] and I'm wondering if there is a way to add an object at the end without having to rewrite the entire file on the server. As a workaround, I have been omitting the brackets and adding the ...

javascriptnode.jsjson

Dragging a Google Maps marker causes a border to appear around a nearby marker

Recently, I added a main draggable marker to the map. However, an unusual issue arises when dragging this marker - a blue outline appears around one of the existing markers on the map. This behavior is puzzling as it seems to be triggered by a click event ...

javascriptgoogle-maps

Can you suggest a simpler approach to implementing this function?

Greetings to all who are perusing this message. I have devised a technique for retrieving today's date along with the current time. If the deadline value in the database is null, it will fetch the current datetime and format it correctly. Otherwise, ...

javascriptlaraveldatetimevue.jsdatetimepicker

The AJAX POST request is not receiving the JSON data as expected

After creating an HTML form with the following structure: <form id="loginForm" name="loginForm"> <div class="form-group"> <input type="username" class="form-control" id="username" name="username" placeholder="Your username..." > ...

javascripthtmlnode.jsajaxpost

Data is not being displayed in the Angular table

Currently, I am working on developing a time tracking application as part of a project. However, I have encountered an issue while attempting to showcase all the entries in a table format (as shown in the image below). Despite having two entries according ...

javascripthtmlangular

Adding days to a HijriDate: A step-by-step guide

I need help with two text boxes. The first box is for selecting the StartDate from an Islamic calendar, which I am currently using jQuery Calendars Datepicker for. The second textbox, ExpireDate, should automatically be set to 60 days after the selected St ...

javascriptjqueryasp.netdatepicker

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

In Safari, the md-switch displays a yellow section on the md-thumb when toggled. However, other browsers handle the switch without any issues. The md-bar appears fine, but the md-thumb is yellow. I have tried setting everything to the blue color I am using ...

htmlcssangularjssafariless

Delaying navigation to the next URL until a distinct category name is identified

Within this section of JSP code, I am implementing JavaScript and AJAX to validate the uniqueness of a category name. When the submit button is pressed for the first time, it prompts the user to enter a category name. Subsequently, an AJAX call is made to ...

javajavascriptajaxjsonjsp

Tally of number series in an array

If my array looks like [0, 2, 4, 10, 10, 10, 10, 2, 5, 3, 2, 10, 10, 5, 7, 4, 10, 10, 10, 10] How do I determine the number of times a sequence of 10's occurs with at least 3 repetitions. In this example, the output would be 2 because there are 2 s ...

javascriptarrays

I attempted to connect my JavaScript file to my HTML file, but unfortunately, no changes are taking place

I have created an HTML file where I am trying to pass input from it into a function located in a separate JavaScript file, and then have the data added to a SQL server. The JavaScript file works perfectly fine when run independently, but when I try to call ...

javascripthtml

Ways to expose an object in a Node module

One of my modules relies on a parsing functionality, with other modules needing to query the values provided by this parser. I have some key questions regarding its design: How should I approach building it in terms of design aspects? Which method should ...

javascriptnode.jsmodulerequire

A more concise validation function for mandatory fields

When working on an HTML application with TypeScript, I encountered a situation where I needed to build an error message for a form that had several required fields. In my TypeScript file, I created a function called hasErrors() which checks each field and ...

javascripthtmlvalidationtypescript

Adding an id to a ul tag using JavaScript

I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking t ...

javascripthtmljquerycss

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI

Is there a way to move the toggle element to the other side in Material-UI's listItem without using the leftToggle option? The documentation does not specify a leftToggle attribute, so I am looking for alternative solutions. I would like to align the ...

javascriptreactjsmaterial-ui

Implementing Injector Class instead of ReflectiveInjector class is a great way to improve performance

I have been experimenting with dynamic loading data in angular. To achieve this, I initially used the following code snippet - const inputProviders = Object.keys(data.inputs).map(inputName => { return { provide: inputName, useValue: data.inputs[inp ...

angularjsangularangularjs-scope