Is it feasible to simultaneously load multiple directives in AngularJS?

I currently have a UI table with 5 columns, each containing different charts rendered using various directives such as custom progress bars and margin targets. The functionality is operating smoothly at the moment.

Issue: When loading the page, it takes about 10 seconds to render (with backend data returning in 800-900ms). However, when I reduce the number of chart columns from 5 to 1, the rendering time dramatically decreases to 2.5 seconds. As I gradually add columns back in, the rendering time increases by 1-2 seconds per additional column.

I am exploring options to potentially call all 5 directives simultaneously to improve the rendering time to around 3-4 seconds.

Thank you in advance!

javascriptangularjsperformanceangularjs-directiveparallel-processing

Answer №1

After analyzing the issue at hand, I have come to the following conclusions:

  1. Directives typically run in parallel unless they are nested within each other. In your case, if they are within an ng-repeat loop, they will run parallel.
  2. It is advisable to avoid calling all 25 objects simultaneously (consider implementing pagination) to optimize server time.
  3. To improve performance, refrain from rendering all charts on the DOM simultaneously. Instead, render only 5 charts but display one with "display: block" and hide the rest with "display: none". Gradually show them one by one to prevent DOM freezing. Additionally, consider using the limit option in the ng-repeat directive.

Kindly provide the DOM code and JS code for further assistance.

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

What is the best way to send a query in a jQuery AJAX call?

I am a beginner in working with AJAX requests and server programming. This project is part of my school assignment. I need to include the SID that was generated as a parameter for this request. Additionally, I am trying to pass in an object of colors, a st ...

javascriptjquerynode.jsajaxexpress

Maintain the original order of rows in the table while shuffling the columns they appear in randomly

I need help with my table setup. The left column contains words in English, while the right column has the same words translated into Korean. Is there a way to keep the rows intact while randomizing the order of the columns? Here's an example: <ta ...

javascripthtml

Spin a child element by clicking on its parent component

I am looking to create a unique animated effect for the arrows on a button, where they rotate 180 degrees each time the button is clicked. The concept involves rotating both sides of the arrow (which are constructed using div elements) every time the con ...

javascripthtmlcss

When attempting to call the event outside of the component, the functionality of the event in VUE.js does not work

Currently, I am working on a small product page following the guidelines from this Vue.js tutorial. The page consists of a product component which includes an "add to cart" button. However, the actual cart is located outside the component in index.html, so ...

javascripthtmlcssvue.js

Don't forget to keep track of when the user has closed

How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...

javascriptjqueryhtmlcsscaching

Is there a reason why the child elements do not appear within a div with an ng-if directive when the condition is true?

I'm facing an issue with an ngIf directive in my code. Here's the relevant snippet: <div ngIf="colorSelected" ng-cloak> <h6>My Color</h6> </div> Even when colorSelected is set to true, the inner header element isn&apos ...

angularjs

Obtain information from a CSV document within Highchart Angular

Is there a way to access and retrieve data from a CSV file stored in the assets folder of my local system? The CSV file contains 5 or 6 columns of information. Important: This is an Angular project, therefore jQuery is not available. ...

javascriptangulartypescripthighchartslinechart

Issue with connecting to server causing difficulty in downloading files using AngularJS

The data fetched from the server is displayed here. viewApp.controller('perInfor',['$scope','$http',function($scope,$http){ $scope.viewPerson = function(id){ console.log(id); $http({ method:'get', ...

angularjs

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have ...

javascripthtmlcss

Removing an item from a JSON array based on its value using jQuery

This is a section of my JSON array: var videos = $j.parseJSON(' [ { "privacy":"public", "id":"1169341693" }, { "privacy":"private", "id":"803641223" }, { "privacy":"public", "id":"1300612600" }, ...... When I use co ...

javascriptjqueryarraysjson

AngularJS routing that is tailored to form input

I am trying to create a dynamic html page where the user can input form variables. My goal is to use AngularJS routing to navigate to different URLs based on the form inputs. Does anyone have advice or guidance on how I can achieve this functionality? ...

htmlangularjsroutesurl-routing

When an AJAX request is made, it can either return an array or a single object, potentially leading to

My proficiency in Javascript is definitely lacking, and I've only just begun to understand it. I have set up an AJAX call to an API using the GET method. The JSON data returned by the API is pretty standard. If I don't include an ID, I receive ...

javascriptajax

What methods can we employ to prevent the GraphQL query from being triggered with every keystroke when using React?

Recently, I received a new task that requires me to implement input value debouncing to prevent backend requests on every keystroke. Additionally, I need to establish an internal useState for CollectionsAutocomplete, which is connected to the generalQuery ...

javascriptreactjsmaterial-uigraphql

Optimal method for linking NodeJS and Angular in a seamless integration

I am currently working on developing a web application that integrates a Node server as the backend and Angular for the front end. At the moment, my application consists of two JavaScript files: server.js and controller.js. Below is the code snippet for ea ...

javascriptangularjsnode.js

Using ng-model within ng-repeat for data binding in AngularJS

My challenge is to connect a model called 'User' to a series of input fields. Since I don't know the specific fields in advance, I need to write generic code that dynamically sets up the form based on the available fields. <script> ...

javascriptangularjs

What steps can I take to ensure that I establish the definition of this variable?

My situation involves a variable called Blog, which is a mongoose model. The definition of this variable is as follows: db.once("open", function(){ var userSchema = new mongoose.Schema({ username: String, password: String }); ...

javascriptnode.jsexpress

Add-on or code snippet for Node.js that allows for optional regex groups

Strings in Sequence line 1 = [A B C] line 2 = [A C] line 3 = [B C] Regular Expression /\[?(?<groupA>[A])?(?:[ ]*)?(?<groupB>[B])?(?:[ ]*)?(?<groupC>[C])\]/gm Is there a way to achieve the desired output using a plugin or spe ...

javascriptregexnode.js

Working with numerous query parameters within AngularJS

When interfacing with an external service, I’m receiving query parameters in the following format: url/?error=someError&error_description=someErrorDescription In my app.js file, I have attempted to handle this using the routeProvider as shown below ...

javascriptangularjs

Learn how to incorporate latitude and longitude coding into PHP to display a map icon that correctly redirects to the desired URL when clicked

I am in need of a table that includes buttons for adding, editing, deleting, and mapping. Everything works fine so far, but when I click on the map button, it should take me to Google Maps with coordinates linked from a MySQL database containing latitude ...

javascriptphpmysqlgoogle-maps

Error: The request was denied by the operating system. Issue encountered while attempting to build a new React application

I recently installed the LTS version 14.17.3 of Node (npm version 6.14.13). Following that, I successfully globally installed create-react-app using the command "npm install -g create-react-app" (version 4.0.3). However, when attempting to create a new R ...

javascriptnode.jsreactjsnpm