One of the most effective strategies for handling large datasets is through the application of unique techniques such as Ionic's collectionRepeat directive and similar approaches. Referred to as 'occlusion culling', the concept revolves around displaying only the elements visible to the user, rather than a predetermined number like 50, 100, or 500. This results in improved scalability and performance.

Unlike traditional infinite scrolling methods which can lead to bloating and decreased scrolling efficiency, the collectionRepeat approach focuses on utilizing a limited set of elements that fit within the viewport and recycling them as needed. By dynamically refilling these elements with new data upon rotation out of view, this technique enables seamless information updates without the need for continuous creation and destruction cycles.

It's worth noting that while Ionic offers innovative solutions, the principles behind collectionRepeat can be adapted and implemented across various platforms due to its open-source nature. However, the functionality and creativity displayed by the Ionic team make their contributions highly valuable in this space.

A similar methodology can be observed in React, where elements outside the view are simply not rendered, resulting in impressive speed even when handling large datasets. Although some minor flickering may occur in basic implementations, the overall performance remains exceptional.

Lastly, implementing track by is strongly recommended for optimizing performance, even with smaller datasets. This practice can greatly enhance data management and processing efficiency.

If you're looking to optimize your AngularJS performance, check out this resource:

Improving AngularJS Speed: From 1200ms to 35ms

This article discusses a new directive that optimizes ng-repeat in four key ways:

Optimization#1: Cache DOM elements

Optimization#2: Aggregate watchers

Optimization#3: Defer element creation

Optimization#4: Bypass watchers for hidden elements

You can find the project on Github here:

• https://github.com/scalyr/angular

How to Use:

1- Begin by including these files in your single-page app:

• core.js
• scalyr.js
• slyEvaluate.js
• slyRepeat.js

2- Add module dependency:

var app = angular.module("app", ['sly']);

3- Replace ng-repeat with sly-repeat

<tr sly-repeat="m in rows"> .....<tr>

Enjoy the optimized performance!

In addition to suggestions such as using track by and optimizing loops, I found another helpful tip.

<span ng-bind="::stock.name"></span>

This snippet of code will display the name once it has finished loading, and then stop monitoring it. Similarly, for ng-repeats, you can use:

<div ng-repeat="stock in ::ctrl.stocks">{{::stock.name}}</div>

Keep in mind that this technique is only compatible with AngularJS version 1.3 and above. From

One way to improve performance is by using the "track by" option:

<div ng-repeat="item in items track by item.id">

This is more efficient than:

<div ng-repeat="item in items">

source:https://www.example.com/article123

For websites where all rows are the same height, consider using the virtualizing ng-repeat feature:

Check out this interesting demo that also offers support for inertial scrolling.

Enhancing scrolling performance can be achieved through virtual scrolling, which is particularly useful for managing extensive lists and large datasets.

An effective way to utilize this technique is by incorporating Angular Material's md-virtual-repeat feature, as showcased in this Demo featuring 50,000 items.

This description from the virtual repeat documentation sums it up well:

Virtual repeat serves as a more efficient alternative to ng-repeat by only rendering enough DOM nodes to fill the container and recycling them as the user scrolls.

One golden rule: never keep the user waiting.

Keeping this in mind, a webpage that gradually loads over 10 seconds will feel faster than staring at a blank screen for 3 seconds before everything appears at once.

Instead of focusing on making the page fast from a technical standpoint, focus on making it appear fast to the user, even if it means the final result is slightly slower:

function applyItemlist(items){
    var item = items.shift();
    if(item){
        $timeout(function(){
            $scope.items.push(item);
            applyItemlist(items);
        }, 0); // <-- introducing a small delay of 10ms
    }
}

The code snippet above allows the list to grow gradually row by row, which may be slower than rendering everything at once. But from the user's perspective, it gives the illusion of speed.

A new approach suggested by @Steffomio

Rather than adding each item one by one, we can add items in chunks.

// Utilizing the chunks function obtained from:
// http://stackoverflow.com/questions/8495687/split-array-into-chunks#11764168
var chunks = chunk(folders, 100);

// Displaying the first set of items immediately
$scope.items = chunks[0];

var delay = 100;
angular.forEach(chunks, function(value, index) {
    delay += 100;

    // Skip the first chunk
    if( index > 0 ) {
        $timeout(function() {
            Array.prototype.push.apply($scope.items,value);
        }, delay);
    }       
});

At times, the data retrieval from the server happens in mere milliseconds (let's say around 100ms), but displaying that data on our web page takes significantly longer (approximately 900ms).

This means that a large portion of the time, about 800ms, is spent solely on rendering the web page itself.

To address this issue in my web application, I have implemented pagination or infinite scrolling to showcase a list of data. For instance, I display only 50 pieces of data per page initially, which requires just 50ms for loading.

As a result, the total time has been reduced from 900ms to 150ms. When a user requests the next page, the next set of 50 data points is displayed and so forth.

Implementing such a strategy can greatly enhance performance. Best of luck!

Implemented a custom directive (ng-repeat with lazy loading) 

This directive is designed to load data as the user scrolls to the bottom of the page, removing half of the previously loaded data each time. As the user scrolls back up to the top of the div, previous data (according to the page number) will be reloaded, once again removing half of the current data. This approach ensures that only a limited amount of data is present in the DOM at any given time, improving performance by avoiding rendering all data at once.

Here is the HTML code snippet:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70111e17051c11025e1a0330415e435e08">[email protected]</a>" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ListController">
  <div class="row customScroll" id="customTable" datafilter pagenumber="pageNumber" data="rowData" searchdata="searchdata" itemsPerPage="{{itemsPerPage}}"  totaldata="totalData"   selectedrow="onRowSelected(row,row.index)"  style="height:300px;overflow-y: auto;padding-top: 5px">

    <!--<div class="col-md-12 col-xs-12 col-sm-12 assign-list" ng-repeat="row in CRGC.rowData track by $index | orderBy:sortField:sortReverse | filter:searchFish">-->
    <div class="col-md-12 col-xs-12 col-sm-12 pdl0 assign-list" style="padding:10px" ng-repeat="row in rowData" ng-hide="row[CRGC.columns[0].id]=='' && row[CRGC.columns[1].id]==''">
        <!--col1-->

        <div ng-click ="onRowSelected(row,row.index)"> <span>{{row["sno"]}}</span> <span>{{row["id"]}}</span> <span>{{row["name"]}}</span></div>
      <!--   <div class="border_opacity"></div> -->
    </div>

</div>

  </body>

</html>

And here is the Angular code snippet:

var app = angular.module('plunker', []);
var x;
ListController.$inject = ['$scope', '$timeout', '$q', '$templateCache'];

function ListController($scope, $timeout, $q, $templateCache) {
  // Controller logic goes here
}

angular.module('plunker').controller('ListController', ListController).directive('datafilter', function($compile) {
  // Directive logic goes here
});

You can view a demo with the directive here.

If you are using UI-grid in your project, similar functionality exists with infinite-scroll feature.

Depending on the height of the division, new data is loaded as the user scrolls and previous data is removed. Here's an example of the HTML code:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9b949d8f969b88d49089bacbd4c9d482">[email protected]</a>" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ListController">
    // Body content goes here
  </body>

</html>

And the corresponding Angular code:

// Angular code for UI Grid implementation goes here

You can check out a demo of UI Grid with infinite-scroll here.