cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Check out the Dropbox cheat sheet for getting started in 2021 here!

Discuss Dropbox Developer & API

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Several xmlhttprequest: very slow

Several xmlhttprequest: very slow

Helpful | Level 6

My R-pi based weatherstation collects 48 measurements over an hour.
When a new hour starts, these are saved in a file and uploaded to dropbox, 
- and a new collection begins.
When a new day starts, the existing files are overwritten.

The files are created as a code segment for javascript as follows:

var array1 = [-0.06,18.6,47,64,1014.1, ......, 0.41,18.61,46.82,1013.6];
These is named: 1.js, 2.js etc.
In my web browser, I can then use these as include files for javascript.
Thus:

<script src="https:confused face:/dl.dropbox.com/s/xyzxyzxyzxyzxyz/1.js?raw=1" type = "text / javascript"> </ script>
I then plot these data in graphs that cover a day.
This works fine and is very fast even though I need to download 24 files.
I have now tried to build 24 CSV data files and then download them with xmlhttprequest.
This is extremely slow. (Have tried both sync and async)

Why?
And what can I do instead?

Sincerely Poul Christoffersen

1 Accepted Solution

Accepted Solutions

Re: Several xmlhttprequest: very slow

Dropboxer

Thanks! I just tried this, and the network requests to the Dropbox links aren't running particularly slowly for me. How are you measuring this? What step exactly is running slow?

I do notice that you have `result` scoped outside any particular function, and you're doing `result+= xhr.responseText`, meaning that each call will yield the concatenation of the results of all previous calls, in addition to the current call. Is that what you intended? The size of that may grow relatively large, especially if the csv files are large to begin with, which could slow down execution. You may want to scope the `result` variable to inside your `onreadystatechange` function, and just pass just the current result to `addTxt`, if that makes sense for what you're building.

Anyway, that aside, I don't see any particular issues with the Dropbox service itself here, but please let me know if I'm missing something.

Also, one other note, you're writing these links to access 'dl.dropbox.com', but that will result in a redirect anyway. If you want to avoid that, you should use 'dl.dropboxusercontent.com' instead. Be aware that accessing file data programmatically via either of these domains isn't officially supported anyway. (You're supposed to use the 'raw=1' parameter, for instance, as documented here, but that may not work for your use case.)

View solution in original post

5 Replies 5

Re: Several xmlhttprequest: very slow

Dropboxer

I'm not aware of any reason that using XMLHttpRequest in particular should be very slow. Can you share the code you're using and how you're measuring this?

Re: Several xmlhttprequest: very slow

Helpful | Level 6

My code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:confused face:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http:confused face:/www.w3.org/1999/xhtml">

 

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Untitled 1</title>

 <script>

var result;

var  files = [                                        //   "dl" and not "www" ! ! !

  "https:confused face:/dl.dropbox.com/s/xyzxyzxyzxyzxyzx/0.csv", …….

, "https:confused face:/dl.dropbox.com/s/xyzxyzxyzxyzxyzx/23.csv"

 ];

 function readDbox() {

   addTxt("Starting download..");

   var url;

   var xhr = new XMLHttpRequest();

   for (let i=0; i<files.length; i++) {

      url = files[i];

      addTxt(url);

      xhr.onreadystatechange = function() {

       if (xhr.readyState === 4 && xhr.status === 200) {

           result+= xhr.responseText;

         }

      }

      xhr.open("GET", url, true); // false => sync

      xhr.send();

   }

   addTxt(result) ;

}

function addTxt(str) { document.getElementById("txtA").innerHTML+= str+"\n";      }

 </script> 

</head>

 <body>

   <textarea id="txtA" style="width: 286px; height: 154px"  ></textarea><br/><br/>

   <input id="btn1" type="button" value="Get file" onclick="readDbox()"/>

</body>

 </html>

 

Re: Several xmlhttprequest: very slow

Dropboxer

Thanks! I just tried this, and the network requests to the Dropbox links aren't running particularly slowly for me. How are you measuring this? What step exactly is running slow?

I do notice that you have `result` scoped outside any particular function, and you're doing `result+= xhr.responseText`, meaning that each call will yield the concatenation of the results of all previous calls, in addition to the current call. Is that what you intended? The size of that may grow relatively large, especially if the csv files are large to begin with, which could slow down execution. You may want to scope the `result` variable to inside your `onreadystatechange` function, and just pass just the current result to `addTxt`, if that makes sense for what you're building.

Anyway, that aside, I don't see any particular issues with the Dropbox service itself here, but please let me know if I'm missing something.

Also, one other note, you're writing these links to access 'dl.dropbox.com', but that will result in a redirect anyway. If you want to avoid that, you should use 'dl.dropboxusercontent.com' instead. Be aware that accessing file data programmatically via either of these domains isn't officially supported anyway. (You're supposed to use the 'raw=1' parameter, for instance, as documented here, but that may not work for your use case.)

View solution in original post

Re: Several xmlhttprequest: very slow

Helpful | Level 6

 

Yes, I really want to put together the contents of all 24 files as they make up a day and night.
I have changed the program a bit, but it still takes 12 seconds to load.
(When I use the method of including 24 javascript files, it takes less than 1 second.
The amount of data is the same.)

 

//-------------------

<!DOCTYPE html ">
<head>
<script>


var files = [
"https:confused face:/dl.dropboxusercontent.com/s/xyxg0qxyzqwqw2k/0.csv",

................

"https:confused face:/dl.dropboxusercontent.com/s/qwertyytrexyzyxz/23.csv"
];

var xhr = new XMLHttpRequest();
var result;

function laesDbox(url) {
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) result = xhr.responseText;
   }
  xhr.open("GET", url, false); // false => sync
  xhr.send();
}

function getFiles() {
   result ="";
   addTxt("Get files:");
   for (let i=0; i<files.length; i++) {
      laesDbox(files[i]);
      addTxt(result);
 }
}

function addTxt(str) { document.getElementById("txtA").innerHTML+= str+"\n"; }

</script></head>

<body>
<textarea id="txtA" style="width: 900px; height:700px"></textarea><br/><br/>
<input id="btn1" type="button" value="Hent fil" onclick="getFiles()"/>
</body>

</html>

Re: Several xmlhttprequest: very slow

Helpful | Level 6

I do not think my method of using XHR calls was quite right.
I found a better solution on stackowerflow ("How do I promisify native XHR?")
I copied the makeRequest function () from there: now it works perfectly. Retrieves 24 files at approx. 1 second
Thanks for the help.

<!DOCTYPE html ">
<head>
<script>

var files = [
"https:confused face:/dl.dropboxusercontent.com/s/................/0.csv",
........ ];

function getFiles() {
result ="";
addTxt("HENT");
for (let i=0; i<files.length; i++) {
udfoerRequest('GET', files[i], function (err, datums) {
if (err) { throw err; }
addTxt(datums);
});
}
}

function makeRequest (method, url, done) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () { done(null, xhr.response); };
xhr.onerror = function () { done(xhr.response); };
xhr.send();
}

//----------------------

function addTxt(str) { document.getElementById("txtA").innerHTML+= str+"\n"; }

</script>

</head>

<body>
<textarea id="txtA" style="width: 900px; height:700px"></textarea><br/><br/>
<input id="btn1" type="button" value="Get files" onclick="getFiles()"/>
</body>

</html>

Polls
Are you starting new work habits this year?

Work Smarter with Dropbox

The way we work is changing. Share and discover new ways to work smarter with Dropbox in our community.

Sound good? Let's get started.
Who's talking

Top contributors to this post

What do Dropbox user levels mean?
Need more support?