Minimize http requests of jQuery ajax parsing

Question

I created the function below, which basically parses the HTML of a given url, scans for a certain class and process the text that it finds:

A small sample of my function:

function displayRating(theID){
  var $theUrl = $('#' + theID + ' > a').attr('href');
  jQuery.support.cors = true;
  var num, str, nums=[], avgnum, avgstr, avgnums=[];
  $.ajax({
    url: $theUrl,
    type: "GET",
    timeout: 3000,
    dataType: "text",
    success: function(data) {
      $(data).find(".count").each(function () {
        str = $(this).text();
        num = parseInt(str.substring(1,str.length-1), 10);
        nums.push(num);
      });
      var totalSum = 0;
      for (var i = 0; i < nums.length; i++){
        totalSum += nums[i];
      }
     more code here...
  });
}

I call this function 15 times because I need to display several data that can be collected from several pages. With this method, I was hoping that the number of http requests would be the same as the number that the function is called (15). However, I get an extremely huge number (340), which means that when parsing the HTML it also requests at the background all images that are included in the urls I call. This means that the loading time of the page is not acceptable (5-6 seconds).

My question is: Can I optimize this function so that it reads the HTML as plain text without loading at the background all images? Is there any way to minimize these requests?

Note: Unfortunately, PHP is not an option.

Can you use [jquery defferred](http://learn.jquery.com/code-organization/deferreds/jquery-deferreds/)? This way you can do your job only when all ajax callback have done. You can even use an array of ajax callbak as seen in [this](http://stackoverflow.com/questions/5627284/pass-in-an-array-of-deferreds-to-when) thread. — Alepac, Apr 30 '13 at 10:05
@roasted The function is simply called as `displayRating(someid)` at the end of the document. — otinanai, Apr 30 '13 at 10:11
@roasted I have to call the function 15 times because each time I need to get different values from different urls and display them in this page. — otinanai, Apr 30 '13 at 10:15
Ok, i give up! I ask you to show exactly the piece of code you use to call this function 15 times because you told us than in fact it's called 340 times... — A. Wolff, Apr 30 '13 at 10:17
@roasted I told you that I call the function 15 times and instead of having 15 http requests, I get 340 requests because it requests for the images included in the urls I call. I see these requests from Firebug. — otinanai, Apr 30 '13 at 10:23
@otinanai Ok, now i understand your problem! My apologies! Thx for feedback — A. Wolff, Apr 30 '13 at 10:29
@roasted No problem! Do you think I can find a way to parse the html as plain text, without having to load the images? However, I define `dataType: "text"` in my function. — otinanai, Apr 30 '13 at 10:31
I would use a proxified script server side to remove all images references before send it to client. But as you said, this is not an option for you. Doing it client side, i don't know if it's possible! — A. Wolff, Apr 30 '13 at 10:36
So if I understand well the `$(data)` load the images even if you never append this object to the DOM, isn't it? — Alepac, Apr 30 '13 at 11:19
@Alepac This is correct. I just need to use `$(data)` to find some specific `id`s and process their text/values. — otinanai, Apr 30 '13 at 11:49

score 0 · Accepted Answer · answered Apr 30 '13 at 12:10

0

You could replace the src attribut with a custom one, parse the new string and than replace the right src tag:

data=data.replace(/ src=/g," mySrc=");
$(data).find(".count")...
...
data = data.replace(/ mySrc=/g," src=");

Here is a JSfiddle using (but not loading) your profile image.

N.B. you should usa a custom attribut (mySrc in the example) not found anyware in the data string.

answered Apr 30 '13 at 12:10

Alepac

1,833
13
24

Thanks for your time! It sounds promising. I'll try that and come back to let you know of any improvement. – otinanai Apr 30 '13 at 12:15

Minimize http requests of jQuery ajax parsing

1 Answers1