How does Facebook show browser loading progress during AJAX Page Loads? How does Facebook show browser loading progress during AJAX Page Loads? ajax ajax

How does Facebook show browser loading progress during AJAX Page Loads?


The browser displays the loading state when there is an element in the document which is loading. Ajax requests are made entirely from within JavaScript; the document is not affected and so the loading state isn't triggered.

On the other hand, most of Facebook's requests are made by inserting a <script> tag into the document, pointing to a JavaScript file containing the data they want. (Essentially JSONP, except they use a different format.) The browser will displaying its loading state because the <script> tag is an unloaded element in the document.

This technique/JSONP can expose your site to security risks if you're not careful, because cross-site requests are allowed. Facebook deals with this by generating random URLs for each resource, which are sent to the browser in the initial page load.


Facebook uses a tool they developed called Big Pipe to basically stream their site to the client in chunks. They send an initial script tag with a bare DOM to the client, and the script loads modules on the page asynchronously - the idea being the client is presenting module 1 while the server is fetching module 2, therefore improving load time.

On top of that, they use a technique called long polling. With HTTP 1.1 they can take advantage of a persistent connection and not have to worry about timeouts. When the page is rendered, the client-side script makes an AJAX request to Facebook to essentially "listen" for an event. It will sit there and listen until an event happens. In the meantime, the browser will appear to be "loading" data.

When an event is triggered on Facebook's end (say someone commented on your wall post), FB will send that response back to the client to fire the respective callbacks (like popping up a little tool-tip letting you know about the comment) and IMMEDIATELY send another request to FB to listen for the next event.


Facebook use iframes for communication when they want the browser 'busy' status to appear. You can use iframes to do cross domain ajax by having the iframe call functions in the parent window.