AngularJS: excessive number of event listeners in the view leading to extended loading times

Experiencing an issue with the Angular view when loading the view for the second time.

Input:

The view loads a list of 1500 items
All 1500 items are displayed in a table using ng-repeat with a filter
No $watch is used in the view

Problem description:

The view loads fine and works well without any performance issues the first time.
Upon leaving the view after the first time, it takes 5-10 seconds.
When returning to the view for the second time after step 2, it takes 30 seconds and 99% of that time is spent on scripting. Profiling this step reveals over 20000 listeners.

Questions:

Any suggestions on what could be causing the performance issue in step 3?
Is it advisable to display large amounts of data using ng-repeat?

https://i.sstatic.net/OQZ88.png

Answer №1

It is difficult to provide a concrete solution without seeing your code, but the issue may be related to rendering a large number of items.

Each time you use ng-bind, a new $watch is created. With a large dataset and multiple bindings, the number of watchers could be extremely high. Consider implementing virtualization techniques, like using ui-grid, to only render what is visible on the screen.

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

Divs are the preferred placeholders over inputs and textareas

For the past few weeks, I have been trying to tackle a problem with creating placeholders that guide users on where to type. My goal is to make these placeholders disappear when users start typing and reappear if the div is empty again. All my attempts so ...

javascript jquery placeholder

The second click on ng-click does not seem to be functioning properly

Hello, I am new to AngularJS. I have managed to fetch the required data, but I'm facing an issue where clicking doesn't work for the second time. I have tried multiple solutions but none seem to be working. Could someone please help me solve this ...

jquery asp.net angularjs

The issue of button onclick textfield validation malfunctioning

Within this container, there is a text field identified as 'codeCityId' along with a button that triggers an onclick method. When the button is clicked, the function will verify the input. function click()={ var valid = $('#codeCityId' ...

javascript jquery

Encountering an issue with npm start when attempting to launch the local host server for a React.js project

Encountering an issue with npm start Error message: 'Equipment' is not recognized as a command, operable program or batch file. internal/modules/cjs/loader.js:983 throw err; ^ Error: Module not found 'C:\Users\Home\Deskto ...

javascript reactjs npm node-modules react-scripts

Exploring the concept of inheriting AngularJS modules

I am intrigued by the behavior of AngularJS. I am wondering if AngularJS modules inherit dependencies from other modules. Let's consider the following structure: var PVNServices = angular.module('PVN.services', []); PVNServices.factory(&a ...

javascript angularjs inheritance

Building a stylish table using Material UI in ReactJS

I've been working on creating a dashboard using the Material UI minimized table. You can check out the documentation here: Material UI Tables However, I've encountered an issue that has me stuck for the past 5 hours. While I was able to successf ...

javascript reactjs material-ui

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

I have successfully implemented a feature to display markers on the map from a geojson file. Currently, when I hover over a marker, I can see its properties in a popup. However, I now want to enhance this functionality so that when a user clicks on a mar ...

javascript html leaflet zooming marker

JavaScript: Retrieve the Number of Subscribers on the BroadcastChannel

Is there a way to check if a Broadcast channel exists and see how many subscribers it has? We have a product link, and some Chrome tabs are subscribed to a Broadcast channel. We want to determine the number of listeners. const bc = new window.BroadcastCha ...

javascript angular typescript google-chrome broadcast-channel

AngularJS Accordion Component: A Handy Tool for Organ

I have been trying to implement an Accordion in my angular project by sending HTML structure from a controller. However, despite following the documentation closely, the Accordion is not displaying as expected. Here is a snippet of the code I am using: v ...

javascript angularjs

Why does Array Object sorting fail to handle large amounts of data in Javascript?

Encountered an issue today, not sure if it's a coding problem or a bug in Javascript. Attempting to sort an object array structured like this: const array = [{ text: 'one', count: 5 }, { text: 'two', count: 5 }, { text: 'thre ...

javascript arrays sorting

In Angular, which event can trigger before the browser is refreshed?

onbeforeunload event does not trigger when the page is refreshed. this.scope.$on('$stateChangeStart', (event, next, current) => { if(!confirm("Are you sure you want to refresh this page?")) { event.preventD ...

angularjs refresh

Why isn't my div displaying in JavaScript?

Currently working on a project for the Odin Project front-end web development. My task involves creating a grid using javascript/jQuery. I attempted to use the createElement method but have encountered an issue in making the div visible within the html. Am ...

javascript jquery html

Is it possible for a gradient to maintain the original width of the element to which it is added?

Is there a way to create a gradient that remains static and masks out certain visible parts? I want the countdown timer to darken as it nears the end. Currently, my gradient only reduces colors in between while keeping the left and right colors: (funct ...

javascript html css

How to troubleshoot NodeJS errors when piping data from tar packing to webhdfs

I am currently in the process of developing a node application that utilizes Hadoop as a long-term storage solution for data when one of my services is not operational. To optimize efficiency and minimize processing time due to anticipated high transfer vo ...

javascript node.js hadoop tar webhdfs

[filepond] in order to enroll using the serverId value received from the server

Using 'filepond' within a Vue application is causing an issue. In the "process" function, the ID value obtained after transferring the file to the server (response.id) needs to be registered as 'serverId' of the file. Upon checking the ...

javascript vue.js filepond

Alter the value of a key within a JSON object at a specific nested level using Node.js or JavaScript

I am attempting to swap out a specific value in the JSON file. Let's say the JSON data provided below: sample.json let sample={ "yuiwedw":{ "id":"yuiwedw", "loc": "ar", "body":{ "data":"we got this", "loc":"ar", "system":{ ...

javascript node.js nodes

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

javascript html css angularjs

JavaScripter Q&A