Improve performance by rendering table rows without using binding techniques

My current project involves using Angular 1.4, where I have encountered performance challenges with ng-repeat while rendering a large number of rows, such as for tables. I am curious if there is an efficient way to use ng-repeat or explore different iterations to display an array of data in a table format.

Since I only need to output data for a report without any binding requirements, I experimented with techniques like one-time binding but still faced delays (typically taking more than 10 seconds to render 1000 records). I also attempted non-Angular approaches like pre-rendering HTML on the backend and then delivering the HTML rather than the data array. By implementing a custom directive to insert this HTML into the element, I achieved rapid rendering times, even loading 2000 rows within a second, albeit without using Angular.

I am interested in finding a similar performance optimization solution within Angular itself or possibly implementing a comparable method in the controller. Any insights would be greatly valued.

Answer №1

One-way binding is the solution to optimize performance in this scenario:

<ul ng-repeat="item in ::items">
  <li>{{ ::item.name }}</li>
</ul>

Remember to use the :: syntax for each item within the repeater.

The estimated time of 10 seconds for processing 1000 rows seems unrealistically high, considering your business logic complexity.

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

Is invalid HTML causing issues with Backbone.js templating in Phonegap?

Summary: When my template file contains valid HTML code, it does not display in Phonegap. The structure of my index.html file is as follows: <body onload="onBodyLoad()"> <div data-role="page"> <a href="#login" id="clickme">C ...

Flow object with Angular using ng-flow: Existing flow object

Just a quick question that I can't seem to find an answer for on my own or through searching online. Currently, I have a button set up for clicking and uploading files. However, I also want to incorporate drag and drop functionality using the same fra ...

How to enhance a class in JavaScript by adding a dynamic property

Within my code, I've defined a class which looks like this: class classA { id: number; name: string; constructor(data){ this.id = data?.id || 0; this.name = data?.name || ''; } } What I aim to do now is add ...

Extract all objects from an array where a specific field contains an array

data:[ { id:1, tags:['TagA','TagB','TagC'] }, { id:2, tags:['TagB','TagD'] }, { id:3, tags:[&a ...

Display the content only if the filter is active and all nested conditions are met

I am currently using ng-repeat to dynamically create elements like this: <div class="items"> <!-- WANT TO HIDE THIS ENTIRE AREA IF THERE IS NO VALID ITEMS --> <b>Items</b> <span ng-repeat="item in items | orderBy:'pri ...

Displaying then concealing a Bootstrap alert - unable to display again

I'm working with a basic hidden dismissible bootstrap alert: <div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none"> <button type="button" class="close" data-dismiss="alert" a ...

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

Leveraging AJAX to transmit a JavaScript variable to PHP within the same webpage

I have a webpage where I want to update a PHP variable based on the value of a name attribute when a user clicks on a link. Here is an example of what I am attempting to accomplish: // PHP <?php $jsVar = $_POST['jsVar']; echo $jsVar; ...

such as in the post schema, the word "like" does not

like not removing from post model likeSchema .findOne({$and: [{post: postId ,user: userId}]}) .exec((err, result) =>{ if (result) { db.likeSchema .findOne( { $and ...

Enclose Angular $resource requests that do not return POST data

Currently, I am working on enhancing my $resource requests by implementing a straightforward wrapper. The primary objective is to incorporate some logic before the request is actually sent. For guidance, I referred to an informative article authored by Nil ...

Running npm start in a React development environment on Linux without automatically opening a browser can be achieved by configuring

As I dive into learning React, I've noticed that I keep running npm start in the terminal multiple times. However, it can be quite frustrating how a new browser window opens each time. I'm currently attempting to prevent this from occurring on my ...

problem with LinkedList implementation in javascript

I have been working on implementing a linked list data structure in JavaScript. Currently, I am facing an issue with inserting a new node at a specific position in the list. The code snippet below shows my implementation: var node3 = { data: 4, ne ...

The arrival of chat featuring Ajax, long-polling, and support for multiple users has finally

Imagine a site with three modules: "links", "home", and "chat". The "links" and "home" modules are static pages that do not require long polling. However, in the "chat" module, new messages may arrive at any time from other users, requiring an immediate up ...

AngularJS: accessing remote systems - a guide

I am looking to explain my objective clearly I need guidance on how to establish a remote desktop connection from my Angular.js application to a windows application running system. The server I am using is Google App Engine. My current ideas: The Windo ...

Javascript's array of undefined values

My issue is that I am receiving an "undefined" error when trying to access the array length. However, everything works fine when I try to access only the array itself. The following does not work -> console.log(this.ref_number_response[0].info.length) ...

Using JavaScript to Show Variables When Clicked

I have been working on populating multiple divs with data stored in variables that change when an image is clicked. Here's a snippet of the code within my tag:</p> <pre><code>function displayName(name){ document.getElementById( ...

tips for converting a stdclass object into an array using php and javascript

To begin, I utilize a jQuery plugin called tableToJson to extract the table values as a JSON object. Next, I convert the JSON object using JSON.stringify which results in the following output: Array ( [0] => stdClass Object ( [Kode] => 4 ...

Find the ultimate destination or URL provided by an ASP script

Hey there, I know this might not be the most popular question and I might even get kicked out for being a newbie asking silly questions that annoy people. But hey, I'm here because I think this community is pretty great. So here's the deal - I&a ...

Display the filter component within a pop-up dialog

I have been attempting to display filter(s) in a mat-dialog. The rendering is successful, but it lacks functionality and I am uncertain if this is the correct approach. Below is the code snippet: This is how I create and open the dialog: public lol(col ...

Switch between different URL tabs seamlessly in NEXT.JS without needing to refresh the page

I have implemented Material UI tabs in my project and I am updating the tab in the URL. However, I do not want the page to refresh every time I switch the tab. Despite using shallow:true in my code, the issue persists. const tabs = [ { label: &apos ...