Retrieving JSON using Javascript includes, why is there a difference in the time needed for the JS download and the start of JS execution?

During the optimization of my web application, I encountered a challenge with parsing JSON data in large quantities. The data consisted of up to 1000 objects with hundreds of attributes each, causing the eval function to take a significant amount of time to process. After researching online and consulting resources like StackOverflow, I discovered a different approach for fetching JSON data from the server called 'Dynamic Javascript include'.

Using Javascript include significantly sped up the JSON parsing process, as affirmed by various blogs (validated through console logs in firebug). However, I noticed a considerable delay between the completion of JavaScript downloading and the execution of the script itself, sometimes resulting in a delay as long as 6 to 7 seconds. Can anyone shed light on why this delay occurs and suggest possible solutions?

Answer №1

Delving into my own inquiry, further investigation revealed that the issue was isolated to my device. Interestingly, on other devices, the discrepancy in the mentioned process was minimal. This led me to speculate that it could be attributed to the excessive number of Firefox addons I have installed. Pure conjecture at this point. Uncertain about it yet.

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

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...

Challenge with executing javascript library (photo sphere viewer)

I was excited to incorporate Photo Sphere Viewer into my project. After running npm i photo-sphere-viewer I noticed that the modules were successfully downloaded. Following that, I added this line inside my project: import PhotoSphereViewer from ' ...

Implement an event listener on an element dynamically inserted into the DOM through an AJAX request

My issue involves a set of checkboxes being dynamically added to a document using an Ajax call. <input type='checkbox' checked class='import'> <input type='checkbox' checked class='import'> <input typ ...

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

In my Angular 12 project, I have integrated Tailwind CSS. The structure of the package.json is as below: { "name": "some-angular-app", "version": "0.0.0", "scripts": { "ng": "ng&quo ...

Fading out, switching HTML, and fading back in

I'm encountering some challenges with a basic jQuery function that is supposed to fade an element out, switch the image inside it, and then fade back in. Here's how my function looks: function flipPage() { $("#leftPage").fadeOut("slow", ...

Apps hosted on Heroku are restricted from accessing CORS, even within the platform's domain

I've been struggling with this problem for a while now. My Nuxt app and service are both hosted on Heroku. After ditching cors(), I added the following code: app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", '*&ap ...

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

The loading icon in JavaScript failed to function when JavaScript was disabled in the browser

On my blogger website, I tried using JavaScript to display a loading icon until the page completely loads. However, this method did not work when JavaScript was disabled on the browser. Only CSS seems to provide a solution. document.onreadystatechange = ...

Tips for validating a text input field depending on the selected value in a dropdown menu using AngularJS

When a user selects from the dropdown menu, they can choose between Number and Decimalnumber. If the user selects Number, the text box should only allow whole numbers (e.g. 22, 33, 444, 345436). The user should not be able to enter decimal values like 22 ...

Updating and adding information in a JSON file using PHP functionality

I have a function to control and update data in a post. However, I am encountering an issue where the function both updates existing information and adds duplicate information during the second addition. Can anyone assist me in identifying where the mista ...

What is the proper way to retrieve items from an Array that have an index that is evenly divisible by

let numbers = [4, 5, 7, 8, 14, 45, 76]; function getEvenElements(arr) { let evenArray = []; for (let i = 0; i < arr.length / 2; i++) { evenArray.push(arr[2 * i]); } return evenArray.filter(num => num !== undefined); } alert(getEvenEle ...

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

Converting JSON data into Dart format

As a newcomer to Flutter, I am seeking guidance on how to display the values of productA and 220 in the console. Below is a JSON file along with a Dart file. { "status": true, "message": "Data returned successfull", &quo ...

Multiple requests were made by Ajax

I am facing an issue with my ajax code where it is being called multiple times. Below is my php code: (While loop extracts results from a database. For brevity, I have included just the modal and dropdown menu sections.) $rezPet = mysqli_query($kon, "SEL ...

What distinguishes v-text from v-load in Vue.js when concealing {{ Mustache }}?

When experiencing the "flash of uncompiled content" in Vue, the brief moment when the page is loading and you see the {{ Mustache }} syntax, developers often use either v-text or v-cloak. According to the documentation, v-text: Updates the element’s t ...

Creating a data visualization in JavaScript or jQuery without relying on pre-built graph libraries

Hey there, I could really use some assistance. Does anyone know if it's possible to create a line graph in JavaScript or jQuery without relying on any external libraries? It doesn't have to be visually stunning, just functional. If you have any i ...

How to access a variable within a callback function in Node.js

Is there a way for me to retrieve the inventory variable outside of the callback function in order to use it and return its value? loadInventory = function () { var inventory = []; offers.loadMyInventory({ appId: 730, contextId: 2, tradabl ...

Transforming the FormData() format into a jQuery structure

Hey there! I've been doing some research online about uploading files using JavaScript, and I stumbled upon some great resources, including this one https://developer.mozilla.org/en-US/docs/Web/API/FormData. I have a script that uploads an image to th ...

Tips for triggering an event from a function instead of the window

Everything is functioning as expected, with the event listener successfully capturing the custom event when it is dispatched from the window and listened for as loading, all seems to be working well. const MyLib = mylib(); function mylib() { const re ...

When I hit pause on the main window, the countdown timer on another window will also update

I am working on a project that involves two windows - one with an admin panel to control the countdown timer and another window where the user can see the timer. I want the changes made in the admin panel, like pausing or adjusting the time, to reflect in ...