Dealing with substantial ajax responses using JavaScript

Currently, I am in the process of developing a website that utilizes jQuery File Tree. However, there is an issue with the enormous size of the AJAX response from the server - 900 KB and containing approximately 70,000 'files' (which are not actually displayed).

Due to this large amount of data being processed on the client-side by JavaScript, the browser sometimes freezes under the strain.

I am seeking possible solutions for this dilemma. Is there a way to instruct the browser to anticipate such a substantial load similar to setting max_execution_time and memory_limit in PHP?

Another approach could involve breaking down the request into smaller segments. Although this would require significant coding efforts, I am uncertain if browsers can effectively handle manipulating such a vast number of DOM nodes.

If you have any alternative suggestions or ideas on how to tackle this issue, please share them.

Answer №1

My suggestion for a more efficient solution is to implement an "on-demand" or "lazy-load" approach. Instead of loading all the data at once, only show the root elements of the file tree initially. Then, use AJAX to fetch and display additional data when the user tries to expand any node to view its children.

This method allows for a piecemeal loading of data, improving performance and user experience.

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

Trouble Logging In: User Login Issue with SailsJS and PassportJS Plugin (sails-generate-auth)

I'm currently facing an issue with user authentication in my SailsJS app using PassportJS. I followed a tutorial on setting up authentication in SailsJS using sails-generate-auth, which can be found here. The POST request seems to be routed correctl ...

Comparison Between Angular and Web API in Regards to Racing Condition with Databases

Currently, I am working on an Angular service that iterates through a list and makes web API calls to add or modify records in the database. The service operates on a small record set with a maximum of 10 records to update. After the loop completes, Angula ...

Tips for Implementing a JSON Web Service Call in a Web Browser

Recently, I have been facing a dilemma with a web service that returns JSON string. My goal is to call this web service directly in the browser without relying on "Invoke". The format I have been using for calling is as follows: http://localhost/Webservic ...

Label the timeline map generated with the leaftime plug-in for leaflet in R with the appropriate tags

Here is a code snippet extracted from the R leaftime package documentation examples. It generates a map with a timeline that displays points as they appear over time. I am interested in adding labels to these points to show their unique id numbers. Upon ...

An effective method for converting a string into a two-dimensional array using JavaScript

One challenge I am facing is checking from a string if a specific fruit has the correct amount on a given date. I've managed to achieve this by converting the string into a 2D array and iterating over the columns. While this method works, I can't ...

Refreshing page - New AJAX updates loading

When using a navigation menu that loads content dynamically via ajax, I encounter an issue. If I refresh the page or navigate to another URL and then return, the current content disappears, and instead, I see the old content under the first menu tab. What ...

Please refrain from displaying the POST response in Express

I have a simple Express API setup: app.get('/example', function(req, res) { if (req.body.messageid == 1) { res.send({message: "Message"}); } } The API returns a message to be displayed on an HTML page. To display the message, I created ...

What is the best way to create an AngularJS page with a direct link that will dynamically affect the content on the

I have a webpage similar to Google search where the backend generates a list of items. The page features an HTML form with multiple fields for users to modify values, resulting in a refreshed list of items from the backend. Currently, users can create a ...

Using $.ajax in Zend to add an additional field to a Json object

Recently, I have been experimenting with using Ajax in conjunction with the Zend framework. After following a helpful tutorial, I was able to successfully implement it. The code snippet I used to fetch the data is as follows: $('#button').click( ...

Executing code upon the completion of jquery's slideUp() function

Is there a method to trigger the execution of html() only after the completion of slideUp()? <p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p> $(".test").slideUp().html(""); I attempted using ...

Storing the response from a jQuery $.post request into a JavaScript variable

My HTML page contains the following snippet of jQuery: $.post("MyPHP.php", {category: CATEGORY}, function(data){var test = data;}); Despite using AJAX, I am unable to access the variable test anywhere else on my page. It seems like $.post does not set th ...

Disabling keypress function in onKeyPress, yet onChange event still activates

In my ReactJS component, I have implemented a function that is triggered by the onKeyPress event: onKeyPress(e) { if (!isNumeric(e.key) && e.key !== '.') { return false; } } Although this function successfully prevents non-numer ...

Error in Chrome Extension Data Type

I am having trouble adding a highlighted red button to YouTube. The code does not seem to be working as expected. manifest.json { "name": "Example", "version": "0.0", "manifest_version": 2, "c ...

Django Not Receiving Data from Ajax Request

I am trying to create a basic ajax method that will run once the document is fully loaded. The code I currently have in my JS file is as follows: $(document).ready(function() { $.ajax({ type:'GET', url: '/get_alert&a ...

Kendo Grid: Issue with adding a new row containing a nested object inoperative

I have been populating a Kendo data grid from nested JSON using the method outlined in this link: Everything was working smoothly until I clicked on the "Add new row" button. At that point, a console error message appeared: "Uncaught TypeError: Cannot r ...

What might be causing the Delphi 2007 ASP.NET AJAX request to return [object Object]?

Is there anyone here who has successfully utilized the AJAX-enabled ASP.NET Web Application wizard in Delphi 2007 to make ajax calls? If so, what's the key to making it function properly? I am asking for two reasons. First, my attempts have not yield ...

RTK Query may sometimes encounter undefined values when fetching data

I am new to using Redux and facing an issue while trying to display data in a Material UI Select. When I try to show the user's name, it works perfectly, but when I do the same for the partner's data, they appear as undefined. In my server index ...

Issues related to ng-model within a dropdown list

Currently, I am facing an issue with retrieving the selected value from a select element using ng-model. Even though the value is displayed correctly on the application page, it remains at the initial value in the app controller. Despite my efforts to find ...

What is the connection between {{result}} and $scope.result within AngularJS?

I comprehend the concept of binding a model to an element. An example would be... <pre ng-model="result">. This connection is established through the $scope.result variable. However, how are these two related? {{result}} $scope.result = data; ...

React - Error: you have a syntax problem because there is an unexpected token <

I am working on a project using Express, pg, and react. However, I have encountered some issues with React. Here is the directory of my project index.js var express = require('express'); var server = express(); var path = require('path&ap ...