ajax call within document.ready blocking browser

Question

I am trying to perform an ajax.get using jquery within document.ready . But the get seems to block the browser.

a dummy example : http://jsfiddle.net/gauravshah/HpfXL/

I am trying to perform a get on document.ready , the result would take about 15-17 seconds to be generated on the server. So until then the browser seems to be blocked. for ex the background images do not animate.

Secondly in IE 8 the browser hangs itself until the request is received.

Similar question : Simple ajax call seems to be blocking Suggesting to use delay for the call , But why to use delay ? I don't find the solution right.

My actual code : ( not sure if it would be of any help)

$(document).ready(function(){
feat_id = "feat-2222"
$.post('/features/creator/get_existing/'+feat_id, {
        "url":url,
        'path':path,
        'parentURL':parentURL,
        'index':index
    },function(data){
        var new_id = $(data).attr('id')
        $(data).find('.featureLocation').html($(data).find('.featureLocation').html());
        $(obj).replaceWith(data)
    })
});

Is your ajax call synchronous or asychronous? Your jsFiddle has like 40 simultaneous ajax calls in it - what's up with that? — jfriend00, Dec 19 '11 at 06:24
ajax call by default is async... I want the get to simulate loading data which takes some time. but since get can not perform request outside the domain , I am calling some 40 ajax request fom jsfiddle. My actual script on server takes about 15 seconds to be calculated.. so wanted to simulate atleast 2-3 seconds by making 40 requests — Gaurav Shah, Dec 19 '11 at 06:26
That's not a very useful simulation in my opinion as different issues will come into play (like a max number of connections allowed open at once). If your ajax call is indeed async and the processing of the response is not time consuming and you aren't looping anywhere waiting for a response, then the browser should be fully live, but we would need to see your real code to offer you ideas. I'd suggest showing us your real code not something that has nothing in common with your real code. — jfriend00, Dec 19 '11 at 06:30
I arrived at the same solution as what the similar question says. — Gaurav Shah, Dec 26 '11 at 11:33

score 1 · Accepted Answer · edited May 23 '17 at 10:08

1

Arrived at the same solution as posted in the similar question

jQuery(document).ready(function() {
  setTimeout(function () {
   $.getJSON("veryLongRequest", function(json) {
   alert("JSON Result: " + json[0].id);});
  }, 500); // You may need to adjust this to a longer delay.
});

Simple ajax call seems to be blocking

edited May 23 '17 at 10:08

Community

1
1

answered Dec 26 '11 at 11:34

Gaurav Shah

5,223
7
43
71

score 0 · Answer 2 · answered Dec 19 '11 at 06:29

I suspect there's a little more going on here than just a "heavy" query. See this article for improving javascript performance. Javascript itself, especially when we load libraries like jQuery, can be "bulky" for the browser. Add on a query such as you're suggesting and the perceived response time of an app or website can become a detriment to the user.

There's no doubt that javascript files can clog up your http load if done ineffectively, and there's widespread misuse of javascript files. Only load what's necessary. Only load minified files. Combine if possible. And, load from CDN if you can. Finally, know that any 15 second query is going to present a dilemma....queries execute until they're done then information is displayed. If you're doing a particularly heavy query, the browser's either going to clog or simply wait until it has something to load. So, consider attacking the query and display patterns themselves.

Once I made sure that my Javascript was effectively invoked based on the teachings of the article above, I'd stop for a minute and consider my Ajax query. Is the query on the server-side the most efficient one possible? Is there a way that you could break up the loading of the data such as a server-side, pipelined datatable That way, you'd only need to load information that your user could reasonably see, then have them do a separate ajaxed get for more information when they're ready, increasing perceived response time.

Also, while I nearly always use the document ready dom loader as you suggest above, try it without once.....run some test cases. Dom loaders were great when IE 6 was wreaking havoc. With most newer browsers, the loading issues have been largely overcome.

I'm a UI Developer for an SAAS application that regularly deals with records in the millions....so this is a daily conundrum for me. I've found that looking at data in a "piece at a time" manner most effectively makes the most efficient interfaces.

In my actual scenario I just load a text string from server that is about 100 characters.. only the calculation on server part is heavy.. not the amount of data — Gaurav Shah, Dec 19 '11 at 06:32
understandable, but regardless 15 seconds in the UI world is an eternity. No matter what, that's going to be a weak link. Is this some sort of exotic join? Could you index for speed? How about performance tweaking the query itself? As an alternative, write a test function that doesn't do any calcuations, just spits out a string.....is the delayed loading still an issue? — bpeterson76, Dec 19 '11 at 06:34
I cannot change the calculation and that is fine.. My users know about it and it can't be helped. Yes I tried returning the dummy text immediately and then the browser seems to respond perfectly well. — Gaurav Shah, Dec 19 '11 at 06:37
If the problem is the calculations on the server side, and all that is passed thru $.get is a string of 100 characters, why are you presenting us with a completely useless example of trying to load a bunch of js files. We all know trying to load 40 js files will clog the browser for a few seconds ? — adeneo, Dec 19 '11 at 06:38
I suspect you just answered your own question...I have a similar issue with a very complex report, and it just seems to sit there for very complex client data. Not much I can do about it, but luckily it's solely for one internal admin user. I'd never let anything like that out the door for general consumption...... — bpeterson76, Dec 19 '11 at 06:39
@adeneo How do I make a single dummy get request that takes up 10 secs ? and I added my code does it make a difference ? — Gaurav Shah, Dec 19 '11 at 06:41
also you are not loading 40 js files.. you are just loading 40 files... (it doesn't parse or do anything with the js) — Gaurav Shah, Dec 19 '11 at 06:47

ajax call within document.ready blocking browser

2 Answers2