The page comes to a standstill while trying to read through a hefty JSON

Question

The page comes to a standstill while trying to read through a hefty JSON

Is there a way to improve the user interface when loading an 8MB json file using JSON.parse in Javascript? The page freezes for about 1-2 minutes, so I'm wondering if it's possible to parse async and display a loading or percentage info.

I came across jsonstream (https://github.com/dominictarr/JSONStream), but I believe it's for nodejs and I couldn't quite understand it.

If anyone has a simple example or solution to share, I would greatly appreciate it. Thank you!

javascript json

Answer 1

Answer №1

If you're looking for a way to improve performance, consider utilizing web workers. By moving the parsing process into a separate thread using web workers, you can parse your file asynchronously.

For example, you can have main.js and worker.js in your project. In main.js, you could implement something like this:

var myWorker = new Worker("worker.js");
myWorker.postMessage(jsonValue); //jsonValue represents your JSON file

myWorker.onmessage = function(e) {
  var parsedJSON = e.data;
  console.log('Message received from worker', parsedJSON);
}

In your worker.js file, you could have the following code:

onmessage = function(e) {
  var parsedJSON = JSON.parse(e.data)
  postMessage(parsedJSON);
}

Answer 2

If you're looking for a way to improve performance, consider utilizing web workers. By moving the parsing process into a separate thread using web workers, you can parse your file asynchronously.

For example, you can have main.js and worker.js in your project. In main.js, you could implement something like this:

var myWorker = new Worker("worker.js");
myWorker.postMessage(jsonValue); //jsonValue represents your JSON file

myWorker.onmessage = function(e) {
  var parsedJSON = e.data;
  console.log('Message received from worker', parsedJSON);
}

In your worker.js file, you could have the following code:

onmessage = function(e) {
  var parsedJSON = JSON.parse(e.data)
  postMessage(parsedJSON);
}

The page comes to a standstill while trying to read through a hefty JSON

Answer №1

Similar questions

Issue with Bootstrap's form-inline element causing incorrect spacing in btn-group

Identify any missing periods and combine the years into a single range

Python Eve encountering WSGI issue [Errno 32] causing a broken pipe during an Ajax call

Place the image either above or below the text in a relative position

Is there a method for creating a JSON DTD template that allows for the mapping of JSON REST APIs back to the client in a universal manner through configuration settings?

Executing a call back function after a successful POST, PUT, or DELETE request can be achieved through redux-observable

Comparing AngularJS controller and template encapsulation to Angular components: a breakdown

Issue with Vuex and Jest - Accessing undefined property <getterName>

Implementing a JSON query with an onkeyup event listener

Is it possible to utilize JSX when developing an App using React CDN or the CRA (create-react-app) boilerplate template?

Using JavaScript code to sift through and eliminate irrelevant data

JS: delay onClick function execution until a page refresh occurs

Utilizing AJAX and PHP to dynamically update MYSQL database via a dropdown selection

The specified variable is not present within the for loop

Interacting with a WebGL globe: accessing database information and displaying pop-up windows when clicking on specific locations on the globe

What is causing ES6 Class properties to be concealed by Higher Order Functions?

Initiate a jQuery modal dialogue box

Internet Explorer does not return results when using AJAX during the onchange event (specifically for IE only

When attempting to rotate a sphere in threejs, the rotation may not function properly if a loop is

What is the process for transforming FormData into an Object and then converting it into a JSON string