Is the amount of time it takes to add an image to the dom and request the content of a txt file using Ajax the same

Consider the scenario where an image and a text file of the same size, 200 KB, need to be downloaded. The question at hand is: if the image is added to the DOM and the time it takes to load is calculated on `onload`, while simultaneously using Ajax to request the content of the text file, will both actions take the same amount of time? Or would the presence of an image affect the download times?

A recent experiment conducted in a controlled local environment yielded some surprising results.

  1. Adding an 8MB image to the DOM and measuring the time taken for its download was conducted multiple times (20), ensuring that caching did not skew the results. On average, the image took approximately 4 seconds to download on a local machine.
  2. In contrast, requesting an 8MB text file using Ajax showed significantly longer download times, averaging around 20 seconds for the textual contents to be retrieved.

The results speak for themselves, but the underlying question remains: why do images and text files exhibit such different download times? Any insights or explanations are welcomed.

Answer №1

Although I have not conducted any tests on this, it is likely that the transport part will take a similar amount of time. There might be some additional overhead involved with the image due to reflow during loading and event firing, but I doubt you would notice much of a difference.

Once we delve further into the realm of network topology and optimization, considerations include factors like whether any links utilize real-time point-to-point encryption and if text file transfers are faster due to better compression methods. However, attempting to determine these intricacies across different types of networks such as the internet can lead to sheer madness.

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

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

Display the homepage if a user accesses a page intended for an ajax request

Currently, I am utilizing jQuery to create a straightforward website. The main page is called 'index.html' and it has the capability to load different content (such as 'info1.html' or 'info2.html') through jQuery ajax requests ...

Using Angular's ng-switch directive within a select dropdown option

Can we implement the [Data Presentation Format] to be utilized in the [Dropdown Box]? Specifically, I would like the "parent" items to appear as is within the dropdown, while the "child" items should have a [tab] indentation to denote their relationship wi ...

Tips for disabling scrolling on touch screens for input elements

I am facing an issue with a modal that is positioned on top of a scrollable document body. I am trying to prevent the scrolling of the document when I swipe my finger on the modal. $(document).on('touchstart touchmove', function(e){ e.preventDef ...

Error: Document expected to be found has already been removed

Upon attempting to log into the app, I encountered an error message in the client console (chrome dev tools) that reads as follows: Uncaught Error: Expected to find a document already present for removed mongo.js?69942a86515ec397dfd8cbb0a151a0eefdd9560d:2 ...

"Troubleshooting a PHP script: Why is my nested AJAX function not producing any results when utilizing the

My code includes a function with nested ajax calls that triggers when a form is submitted. The function is designed to submit form data, reload the table with new database entries, and verify if all results have been added successfully. When I click the s ...

Struggling with dynamic values and regex while utilizing HTML template strings. Need help overcoming regex challenge

Feeling stuck and seeking advice on improving regex usage. For a one-time substitution, the code below works for replacing a single element like -link-. var testHtmlStr = '<tr>' + '<td class="eve"><div class= ...

Sophisticated method for arranging three integers in javascript in descending order, followed by analyzing their relative distances

In developing an interactive infographic, I am working with three integers assigned to variables, each ranging from 0 to 50000. These numbers often have values that are close to each other, and I am looking for a way to identify when either 2, all 3, or no ...

Error message in Linux for NodeJS global NPM package: "File or directory does not exist"

After setting up my Ubuntu 14.04 system, I installed nodejs and npm using the command: sudo apt-get install nodejs npm To ensure packages utilize the node interpreter instead of nodejs, I created a symlink with: sudo ln -s /usr/bin/nodejs /usr/local/bin ...

Is it possible to utilize AJAX and JavaScript exclusively for server-side scripting?

Currently in the process of learning PHP, I've decided to analyze the code using a language that I am more comfortable with as my approach. I'm attempting to recreate a PHP dashboard with features such as role management and session logging. Ha ...

A step-by-step guide on confirming reCAPTCHA during a server request

SITUATION: In the past, I used a simple form submit with POST to "/login" to check my recaptcha. For security reasons, I need to change my implementation and am considering the following steps: 1) Using jQuery to submit the form. 2) Making a call to th ...

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

I am currently facing a compatibility problem involving isomorphic-dompurify and dompurify in my Next.js 13 project. It appears that both libraries are incompatible due to their dependencies on canvas, and I am struggling to find a suitable alternative. M ...

Getting rid of unwanted scrollbars in a breeze

I am facing an issue with two nested divs that have the same height settings. The outer div has a max-width/height constraint along with overflow auto, causing scrollbars to appear when the inner content exceeds its dimensions. However, even if I resize ...

The agent.add() function is malfunctioning, while console.log() is functioning properly

I'm currently working on integrating a bot using Telegram, Dialogflow, and Firebase. One particular function that I'm struggling with is as follows: function findDoc(agent){ const userId = request.body.originalDetectIntentRequest.payload.dat ...

Understanding conditional statements in JavaScript can greatly enhance your programming skills

Here's a search component that I've been working on. I'm trying to figure out how to handle the scenario where there are no items in the array. Should I use an if statement or is there another approach I should take? Any help would be greatl ...

MariaDB won't generate JSON output for a column that has a JSON data type

Currently, I am utilizing MariaDB and phpMyAdmin to effectively manage my database. Within one of my tables, I have a specific field that is defined as type json, or alternatively longtext. However, whenever I execute a SELECT query using JSON_EXTRACT(fiel ...

I am facing some difficulties with my deployed CRA website on Github Pages, as it appears to be malfunctioning compared to when I was running it on localhost using VS Code

After deploying my CRA website on Github Pages, I noticed that it is not functioning the same as it did when running on localhost using VS Code. The site retrieves data from SWAPI and performs manipulations in various React components. While everything wor ...

Mapping a JavaScript object to an MVC model: A comprehensive guide

I have a JavaScript object as shown below: $scope.docPropIdentityModel = { Owner: {OwnerID:"", OwnerName: ""}, }; I need to send this object to my MVC controller using an AJAX call. Let's say the controller looks like this: controll ...

Steps to successfully implement onClick functionality in html within C# server side code

I'm having trouble with my onClick function. When I click, nothing happens and there are no errors to help me diagnose the issue. var data = new FormData(); data.append("cart_list", new_cart); $.ajax({ url: "@Url.Action ...

Setting a value in a hidden field using a dropdown menu

I am encountering an issue while working with a form and making an ajax request. Everything seems to be going smoothly except for assigning the value of a dropdown to a hidden variable. The scenario is this: You choose a previously completed assignment, w ...