Angular directives leading to extended loading durations

We have developed a substantial application using Angular (1.3) that includes a page with around 20 nested custom directives. The loading time of the application, particularly on Android devices, is concerning. After using Chrome timeline profiling, it was evident that the angular bootstrap process takes approximately 800ms on desktop but significantly increases to about 8 seconds on Android devices when remotely debugged.

I am curious if the compilation of directives truly needs to take that long. I believe that the link functions of my directives are not causing the delay. Would replacing some directives with a combination of ng-include/ng-controller improve performance? Could combining all 20 directives into one mega directive make a difference?

Furthermore, why does the mobile version of Chrome perform less efficiently than iOS Safari, despite both browsers running on very similar hardware?

Any insights would be greatly appreciated!

angularjs

Answer №1

The reason for the delay in loading your website could be attributed to the multitude of requests made by the browser. With each directive having its own template, there are 20 additional requests along with js files, images, and CSS. Loading nested directives/templates further impacts performance as they are loaded alongside their parent components.

Performance may vary between desktop and mobile devices due to differing simultaneous connection limits in browsers. For example, iOS Safari allows up to 6 connections while mobile Chrome allows only 4.

To improve loading times, it is essential to reduce template loading and utilize browser caching effectively. Consolidating certain directives can also enhance overall performance in your case.

Answer №2

Here is your initial inquiry

I'm curious, does the process of directive compilation always have to be so time-consuming?

In my personal experience with Angularjs, it can efficiently handle more than 20 custom directives without much delay.

I haven't noticed any significant delays in executing link functions for my directives.

If you're experiencing slow performance, optimization might be necessary due to issues like excessive DOM manipulation or HTML reflow.

Your next question is

Would substituting directives with a mix of ng-include/ng-controller improve efficiency?

I believe not. Both ng-include and ng-controller are directives themselves, so there wouldn't be a fundamental difference.

You also asked

Will consolidating 20 directives into one large directive yield any benefits?

The quantity of directives isn't as crucial as the functionality each directive serves.

And finally, your last question seems to provoke frustration and confusion over its ongoing impact on 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

Using autocompletion in AngularJS by integrating with Mongoose to retrieve data

Hello everyone , I'm currently exploring the Autocomplete feature in AngularJS that retrieves data from mongoose. I came across an example like this one on Stack Overflow: https://stackoverflow.com/questions/18460374/angularjs-autocomplete-from-http ...

angularjsnode.jsmongodbexpress

Exploring the FormData Object in Mongoose

Currently, I am in the process of developing a geolocationAPI that would allow users to query locations based on their specified minimum and maximum distance. However, I am facing difficulties in retrieving these values within my controller. Here is a sni ...

angularjsnode.jsexpress

Passing backend variables/data to AngularJS in Express JS

As a newcomer to express js, I appreciate your patience with me. I've been diving into "MEAN Web Development" by Amos Q. Haviv and finding it to be an excellent read. However, there's one part that's leaving me puzzled. It seems that in or ...

javascriptangularjsnode.jsexpress

Transform the results of a database query into JSON format using Node.js

Below is the code snippet I have written: oracledb.getConnection( { user : "user", password : "password", connectString : "gtmachine:1521/sde1" }, function(err, connection) { if (err) { console.error(err); return; } ...

angularjsjsonnode.js

Getting the Tweets of a Twitter-validated user using node.js

I'm struggling with extracting Tweets from a verified user and could use some assistance. I know it's a broad question, but here's the situation: https://github.com/ttezel/twit provides a way to access tweets from any Twitter account. Howev ...

javascriptnode.jsangularjstwitter

Error in MEAN CRUD operation cannot be determined

{ text: undefined, done: false, _id: 529e16025f5222dc36000002, __v: 0 } PUT /api/todos/529e16025f5222dc36000002 200 142ms - 68b Encountering an issue while updating my CRUD todo list. Despite receiving a successful status code of 200 after submittin ...

javascriptnode.jsmongodbangularjscrud

Use `Res.download()` to send data to the client instead of directly downloading the file

I am trying to transfer a file that has been created by my NodeJS server from the server to the client for download. Users input object data which is then stored in a database. The function responsible for creating the file will read these objects and pop ...

angularjsnode.jsexpress

Error encountered with Protractor: 'TypeError: undefined is not a function'

I have explored various discussions on this particular error code. Nevertheless, I am finding it challenging to come across any solutions that are effective (or perhaps I am just not understanding them). While constructing a Protractor test for a webpage, ...

javascriptangularjsnode.jsprotractorkarma-jasmine

npm sinopia installation failed - there was an error during the installation

When attempting to globally install sinopia for electron updater, I encountered the following error: npm install -g sinopia npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69b9f989f9b9782959eb6c7d8c6d8c ...

angularjsnode.jsnpmelectronsinopia

Blueprint for Multi-User Application with Mongoose Schema

I am in the process of designing a schema for a multi-user application that will be developed using MongoDB, Express, AngularJS, and NodeJS. This application will cater to four different types of users: GUEST, REGISTERED_USER, SUBSCRIBER, and ADMIN. Once a ...

node.jsangularjsmongodbexpressmongoose

Encountered an issue while running the npm start command in AngularJS

As a beginner in angular js, I recently started learning through this tutorial. However, when I attempt to run the development web server using npm start, I encounter the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

angularjsnode.jsmacos

The connection between AngularJS and the Node.js server is struggling with sending input data, resulting in a 404 error message

Why is the HTTP address not found? I am seeing these mistakes in the console: POST http://localhost:3000/api/message 404 (Not Found) angular.min.js XHR finished loading: POST "http://localhost:3000/api/message". angular.min.js Error " ...

angularjsnode.jsmongodbexpressmongoose

Displaying error message on a MEAN stack web application

I'm pretty new to the MEAN stack and I must say, I'm learning a ton. Currently, my challenge is to display an error message on my page when a user is not authorized to access the website. On the page, there's a button that redirects you to t ...

angularjsnode.jsmongodbexpressmean-stack

Node.js and Express.js are being used in conjunction with Angular to create a server-side controller that fetches all data. However, there seems to be an issue as the

"findByStaff" and "findOne" are working correctly, however, "findAll" is not returning any data. I expected findAll to retrieve all courses from mongodb $scope.findByStaff = function() { $scope.courses = Courses.query(); }; $scope.fin ...

angularjsjsonnode.jsmongodbexpress

To retrieve a CSV file on the frontend, simply click a button in an AngularJS application that communicates with NodeJS and ExpressJS

How can I download a .csv file from the frontend? This is the code I am currently using: $http.get('/entity/consultations/_/registerationReport' ) .success(function (data) { myWindow = window.open('../entity/consultations/_/r ...

javascriptnode.jsangularjsmongodbexpress

Angular's ngRoute is causing a redirect to a malformed URL

Currently, I am in the process of developing a single-page application using AngularJS along with NodeJS and Express to serve as both the API and web server. While testing locally, everything was working perfectly fine. However, after cloning the repositor ...

javascriptangularjsnode.jsexpressngroute

Utilizing Node Mailer and Sendgrid to send emails in an Angular MEAN stack project with the angular-fullstack framework generated by Yeoman

Trying to figure out the best location for the code responsible for sending an email through a contact form in my Angular App using angular-fullstack MEAN stack from Yeoman. I managed to implement the email sending logic in the app.js file on the server s ...

javascriptnode.jsangularjsemailexpress

"Encountering issues with npm failing to install node_modules

When attempting to install Angular using npm, I noticed that it is not creating a node_modules directory. This issue occured while following the steps shown in the screenshot below: MacBook-Pro-di-Sandro:~ sandropalmieri$ cd Documents/mycode/ MacBook-Pr ...

angularjsnode.jsnpm

Express app: the ideal location to implement a closed-loop temperature control system

I am relatively new to working with express.js, having only created some basic client/server apps in the past. Currently, I am looking to develop a temperature controller using a PID component. However, I am struggling to grasp the architecture of express ...

node.jsangularjsexpress

Ways to launch angularjs project in production mode sans the use of npm start

Currently, I am in the process of developing a website with angularjs and have set up a local development server using npm. After moving my project directory to a public AFS directory, I encountered an issue where the npm dependencies are not functioning ...

angularjsnode.jsnpmangular-ngmodelopenafs