Improve the efficiency of loading and utilizing data from the petition using $http

In my Ionic framework application, I am dealing with a large amount of data - around 10,000 records initially, with an additional 200 records being added every week. However, the loading time for this information is becoming a concern as certain sections of the app are taking too long to load, resulting in increased CPU and battery usage. Storing the records as .json files results in a file size of approximately 10Mb.

To address this issue, I have been compressing and decompressing the records using the "LZString" library before storing them in localStorage. While this method worked well with 5000 records, I noticed that it was still consuming significant resources due to the use of JSON.parse along with LZString.

My current process involves decompressing the records when needed:

desc = LZString.decompress(window.localStorage.getItem('var')) || []; JSON.parse(desc); // desc contains 5000 records And compressing them again upon first request:

window.localStorage.setItem('var', LZString.compress(JSON.stringify(objJson))); // objJson holds 5000 records Before compression:

Total: 4.82 MB After compression:

Total: 0.55MB I am seeking ways to optimize the performance of my application further and enhance the compression of data. Any suggestions?

Answer №1

If you're dealing with a large amount of items, consider breaking them up into smaller chunks or pages to improve performance. For example, you could try loading 100 records at a time.

Another suggestion is to show a loading indicator while the data is being loaded to keep users informed about the progress.

Check out this link for more information: http://ionicframework.com/docs/api/service/$ionicLoading/

Feel free to reach out if you need further clarification on your question.

Best regards, Dan

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

The function str.split() is dividing the text based on individual letters rather than the specified delimiter

I am facing an issue where the string of tags retrieved from firebase needs to be split by ',' and stored in the data() for rendering. The firebase snapshot data is correctly formatted after splitting when viewed in the console like this: "t ...

Run a series of Mocha unit tests based on the outcomes of previous test results

Currently, I am in the process of writing unit tests for a NodeJS application that I am developing. In relation to some unit-testing logic, I have a question. Imagine if the application first creates a "Group" for users, followed by creating individual Us ...

Employing conditional statements to adjust the size of an image or background identifier in JavaScript

As I dive into the world of Javascript, I find myself faced with the challenge of modifying existing code using if / else statements. The original code snippet in question is as follows: document.getElementById("button1").addEventListener("click", functio ...

Capture the height values from various divs and store them in an array, then utilize these values to adjust the size of other

My goal is to achieve the following: (1) Collect heights from multiple divs and store them in an array. (2) Apply these heights to other elements. The first element should receive the first value, the second element should receive the second value of the ...

Using custom icons in JsTree with the Json_data plugin

I have been working on implementing a JsTree in my MVC website and using the json_data plugin to populate the tree. My Controller action returns a JsonResult that uses a custom class to represent the nodes. I have been going through the documentation tryin ...

Why does e.target.value only capture the initial letter of a string input in ReactJS?

Is the current method correctly capturing only the first letter in the string input? class Example extends React.Component{ state={ name:'Ajith' } changeEvent = (e) => { console.log('change : '+this.s ...

tips for patiently awaiting an ajax response before setting the object

I am currently working on a basic todo app using React. Initially, everything was running smoothly when I stored my data in a pre-defined object. However, now that I am retrieving my data from a link (rest) using AJAX, I seem to be encountering some issues ...

Replace the term "controlled" with "unleashed" when utilizing the file type input

In my app, I have defined multiple states like this: const [state,setstate]=React.useState({headerpic:'',Headerfontfamily:'',Subheaderfontfamilty:''}) And to get an image from my device, I am using the following input: &l ...

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

Persist in the face of a mishap in javascript

Two scripts are present on the page. If the first script encounters an error, the second script will not function properly as a result. Is there a way to make the second script ignore any errors from the first one and still work? Please note that I am str ...

What is the best way to navigate users to a different page using AJAX upon receiving a successful response from PHP?

I am currently using a JavaScript function that is functioning correctly. It retrieves all error messages from the PHP file and displays them in a span with the ID "resto" without any issues. However, I now have a requirement where if the PHP file return ...

Verify if session is in existence

Currently in the process of setting up my NodeJS and Express App, utilizing Passport for authentication through Google Sign In and Login. All functionalities work flawlessly when tested on localhost. The sign-in process is smooth, and upon checking, I can ...

Error: The value of _This.props is not defined

Hey there, I am new to working with React Native and could really use some assistance with this issue: TypeError: _props.goToScreen is not a function. Any help would be greatly appreciated, thank you in advance! In my Profile.js file, I am trying to click ...

Generating step definitions files automatically in cucumber javascript - How is it done?

Is there a way to automatically create step definition files from feature files? I came across a solution for .Net - the plugin called specflow for Visual Studio (check out the "Generating Step Definitions" section here). Is there something similar avail ...

Tips for linking weight scale device to a website

I recently developed a web application that calculates the weight of products. The application was created using PHP, JavaScript, and AJAX, running on a XAMPP server. Now my client is requesting for me to integrate a weight scale machine into the applica ...

A guide on developing an AngularJS SVG directive

I'm attempting to develop an angular directive using version 1.5.5, where the template consists of an svg element. Despite reading through this solution and various others, I'm encountering difficulties in displaying my basic svg element. I' ...

"Upon subscribing, the object fails to appear on the screen

Why is the subscription object not displaying? Did I make a mistake? this.service.submitGbtForm(formValue) .subscribe((status) => { let a = status; // a = {submitGbtFrom: 'success'} console.log(a, 'SINGLE ...

The shadows in Three Js are functioning correctly, although there are a few shadow lines visible below my model

I am currently in the process of modifying a three.js scene, despite having little experience with javascript and three.js. After successfully adding a shadow to my GLTF model, I noticed some yellow and red lines beneath the model that I cannot identify or ...

Searching for a specific bus stop within an array based on a designated route

There's an issue at hand. We have a route with several bus stops. We need to determine the next stop on this route. The "_stopNum": "1" indicates that the stop is the first one on the route. Take a look at a stop example: { "route": [ { ...

Utilizing jQuery for seamless communication between parent and child iFrame windows

On my webpage, there is an iFrame containing a table where I want to add a click event to the rows. The challenge is retrieving the selected row within the iFrame from the parent window. The goal is to define a class for a clicked table row like this: $( ...