Ajax放慢页面

Question

I have a webpage with ajax. Ajax HAS to load some data from other website, which takes some time. During that "load" time, my site is not responding well to user input (going to some other page etc). Before anyone yells - yes, I know, it's because of ajax. :)

My question is - is there any way to limit ajax bandwidth? Fast website is my priority, loading data in the background is secondary.

So, if i have a javascript which calls php (ajax), and then php using cUrl gets some data and returns it back to javascript (actual code is to long to post it here, no one would read it for sure :D) is there any way to prevent that mechanism from blocking my page until it's done?

Answer 1

The question is what is slowing your page down? It could be several things from yoyur description.

A couple of things to bear in mind with ajax:

1: most browsers will only do two xhr requests per domain at the same time

2: if the result of the call xhr needs to be parsed and the parsing is heavy, like eval'ing json in old browsers, it can have a freezing effect on the browser while the data parsing occurs (js is single threaded by nature, unless you count webworkers in html5)

3: if the result of the ajax forces the browser to re-render the page due to dom injection, the rendering can feel slow and freeze the browser a bit in old browsers.

4: if you have bandwidth constraints, try to run your xhrs when the browser is done with other stuff, for instance, wait for domReady on pageload

Answer 2

Look for asynchronous loading of Javascript source files, I hope already you are using asynchronous XHR calls. See the Google Analytics tracking documentation for example usage:

<script type="text/javascript">  (function() {
    var ga = document.createElement('script');     
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:'   == document.location.protocol ? 'https://ssl'   
            : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
    })();
   </script>

http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html