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

Guide on associating user IDs with user objects

I am currently working on adding a "pin this profile" functionality to my website. I have successfully gathered an array of user IDs for the profiles I want to pin, but I am facing difficulties with pushing these IDs to the top of the list of profiles. My ...

Enable Row Editing with a Click in Material Table

Utilizing the material-table library, I am implementing a feature to enable table rows to be editable upon double-click. The goal is for clicking on a row to trigger the same action as clicking the edit button located in the actions column on the leftmost ...

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Hey there, I'm fairly new to web development and I encountered a problem when trying to require two packages, franc and langs, in my index.js file. It turns out that franc is now an ESM only package, requiring me to import it and mention type:module i ...

How do I use props to enable and conceal elements like lists, buttons, and images?

Check out this unique component: <ReusedHeader H1headerGray="text here... " H2headerRed="text2 here ! " pheader="p1" getStarted="button text1" hrefab="button url 1" whatWeDo="button text ...

How can you dynamically change the value of a React datetime slider picker using code?

I can't figure out how to programmatically update the value of the React datetime slider picker, especially when I click on a button. The rendering code for the widget looks like this: <RDSPwidget enableSecond={true} /> This is how my ...

Having trouble with implementing Nested routes in Vuejs?

main.js import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld"; import User from " ...

Can an additional height be added to the equalizer to increase its height?

Is it feasible to append an additional 35px to the height determined by Foundation Equalizer? For instance, if Equalizer computes a height of 350px, I would like to increase it by 35px. This means that the resultant style should be height: 385px; instead ...

Show session in HTML using ng-click after reloading the page

I am currently using the express-session package to store product prices in my application. Everything seems to be functioning correctly, however I am encountering an issue when trying to display the session data in HTML. For example, if there are 2 produc ...

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

Unloading a dynamically-loaded child component in Vue.js from the keep-alive cache

I have a question that is similar to the one mentioned here: Vue.js - Destroy a cached component from keep alive I am working on creating a Tab System using Vue router, and my code looks something like this: //My Tab component <template> <tab& ...

Display a list with a set limit and an option to show more by clicking

I am currently struggling to develop a list of items that displays 3 items per row, and when the "show more" button is clicked, another 3 items should be displayed. My issue arises when using map and slice, as this method results in rendering 3 of the same ...

Saving Pictures in Database Without Using jQuery

Hey there fellow developers, I'm currently immersed in a web project that involves reconstructing a social media platform similar to snapchat. To capture images, I am utilizing my webcam with JavaScript and saving the image data to a variable named i ...

Angular 4 - The Promising Outcome: How to Retrieve the Value upon Completion

Is there a way to retrieve a value from a promise and store it in a global variable? I've been attempting to accomplish this, but the global variable remains undefined. import { Injectable } from '@angular/core'; import {ActivatedRouteSnap ...

What is the best way to use ajax with jquery for file uploading?

Is it possible to use jQuery and ajax to upload an image with this code or something similar? jQuery.ajax({ type: "GET", url: "/userinfo/update/", dataType: "json", data: { ...

Error in Redux app: Attempting to access the 'filter' property of an undefined value

I am currently encountering an issue with my reducer: https://i.stack.imgur.com/7xiHJ.jpg Regarding the props actual, this represents the time of airplane departure or arrival, and it is a property within my API. The API structure looks like this: {"body ...

Learn how to extract data from the "this" object in JavaScript

Can anyone help me with retrieving the numbers generated by this code snippet? $("#100wattaren") .countdown("2018/01/01", function(event) { $(this).text( event.strftime('%D days %H hours %M minutes %S seconds') ); }); When I con ...

Turn a JSON string into an XML string on an iPhone device

After retrieving a JSON string from my web service and storing it in an NSDictionary object, I am looking to convert it into an XML string. Does anyone know how to achieve this without relying on external libraries? ...

jQuery loops through form fields and sets them as disabled

Trying to solve a question... In a form with multiple inputs, I only need to loop through the ones inside the div tagged player. <div class="player"> <input type="text" value="0" class="unit" /> <input type="text" value="0" class="unit" ...

Is there a way to retrieve data from the host URL within the getStaticPaths function in Next.js?

In my Next.js application, there is a serverless function responsible for fetching data from the host. The host URL is configured in a .env file where it is set to http://localhost:3000/api/data during development and https://productionurl.com/api/data in ...

Strategies for accessing the initial portion of an AJAX response

When using ajax to call an URL with dataType HTML, the response includes two parts such as accesstoken=1&expires=452. In this scenario, only the access token is needed. Using alert(response) displays both parts. How can the access token be extracted? ...