Memory leak when using observable array with huge data in knockout

I have the following observable arrays

in my model:

  VM.ListingData([]);
  VM.ResumeListingData([]); 

      

        
        
        
      

    

ListingData

will contain 20 columns x 100 lines of the parsed JSON object. I am binding the grid using the ResumeListingData

following in the AJAX success method:

// To initially bind 10 records
R1ViewModel.ResumeListingData([]);
R1ViewModel.ListingData([]);
R1ViewModel.ListingData(JSON.parse(data.ResumeListing));//data.ResumeListing contains the JSON string returned from server through the ajax request
$.each(R1ViewModel.listingData(), function (index, item) {
                        if (index < 10) {
                            R1ViewModel.ResumeListingData.push(item);
                            return true;
                        }
                        return false;
                    });

      

        
        
        
      

    

Then I call the following function bindNextItems

at the end of the AJAX success:

// To bind rest of the items
       bindNextItems: function () {
            VM.SetIntervalRef(setInterval(function () {
                VM.ResumeListingData.push(VM.ListingData()[VM.SetIntervalCount()]);
                VM.SetIntervalCount(VM.SetIntervalCount() + 1);
                if ($('#rightTable tr').length == VM.listingData().length) {
                    clearInterval(VM.SetIntervalRef());
                }                    
            }, 1));
        }

      

        
        
        
      

    

Now when I load the page for the first time and when I check the browser memory usage in Windows Task Manager it is around 250MB (tested in firefox). As I am doing some actions like searching, paging, filtering, sorting, etc. For each of these actions, 100 lines are returned from the server, the memory usage in the browser is growing steadily, and during my testing it reached 950MB of memory usage. I am not using any observables computed

or using manual subscription

with observable arrays ResumeListingData

and ListingData

. Just clearing them both with []

and by assigning values ​​in the above way when some action is performed.

Where could the problem be? This is my first time facing this problem, so are there any tools to monitor browser memory?

I am using setInterval

100 lines of delay to bind so that the browser does not hang when binding table

. Is there an alternative better way to do this? Any other performance optimized way of push

elements in observable array

?