FB.Canvas.setAutoResize methods to update the size of the iframe to fit its contents.
If you load the Facebook SDK asynchronously, users will see in-page scrollbars until the SDK has loaded and
FB.Canvas.setSize has been called. For a recent application we developed, in-page scrollbars weren’t being removed until 400 milliseconds after the page started loading. Users were seeing some real ugliness for potentially half a second. The small performance benefit we gain by asynchronously loading the Facebook SDK is not worth the pain of having your eyes gouged out by the flash of an in-page scroll bar.
Our tests for this particular application revealed that loading the Facebook SDK at the top of the page only delayed the presentation of the page by 160ms, even without a primed cache. We are talking about loading the Facebook SDK in a Facebook Page Tab, so in reality, it is very likely that the SDK will already be cached by another application. In that scenario, loading the SDK up front only delayed the page display by 116ms.
It is true that by using this approach we are delaying the loading of content and showing our users a blank page for a tenth of a second. However I think that is a worthwhile tradeoff for not having to see an in-page scrollbar while the SDK loads.
Following are the results from our tests. Tests were run 10 times in Firefox 4, profiled with Firebug, and averaged.
Loading the Facebook SDK asynchronously
Facebook SDK loaded¹: 397ms
Facebook SDK initialised²: 410ms
Document ready³: 204ms
Loading the Facebook SDK synchronously just after the opening body tag
Facebook SDK loaded⁴: 105ms
Facebook SDK initialised²: 116ms
Document ready³: 249ms
Loading the Facebook SDK asynchronously (without caching)
Facebook SDK loaded¹: 459ms
Facebook SDK initialised²: 473ms
Document ready³: 218ms
Loading the Facebook SDK synchronously just after the opening body tag (without caching)
Facebook SDK loaded⁴: 150ms
Facebook SDK initialised²: 160ms
Document ready³: 346ms
¹ Time until window.fbAsyncInit is called by the Facebook SDK.
² Time until FB.Canvas.setSize and FB.init have run.
³ Time until jQuery document ready event.
⁴ Time until Facebook SDK has loaded from <script> element.