30 Facebook Like buttons on a page overburden the web browser?

On a page that contains a list of about 30 entries, each of them is Facebook-likable (each entry's HTML contains a Like button), and each of them is either开发者_StackOverflow displayed or not (depends on a filter setting):

• The page takes several seconds to load entirely
• The page uses lots of memory, thanks to the Like buttons
• The page uses CPU even if the user doesn't interact (every 100ms or less, one of the Like buttons fires an event using Javascript)
• If I do not change the DOM tree, just change element visibility, the buttons seem to be reloaded anyway

On a PC with more than 1 GHz and 1 GB mem, the page is unusable because it is so slow (browser: Chromium). How can I change this, keeping the Like buttons?

1. Blame Facebook's "Like" implementation
2. Download Firefox Nightly or 'Aurora', and look at the "about:memory" tab to get an idea of the memory impact of the "Like" buttons. (Firefox has added per-compartment memory reporting to about:memory)

Use the JavaScript SDK

Make sure to include the like buttons via xfbml and the JavaScript SDK. This way you have more control over them.

Don't load them initially, load them explicitly when you need them

Further the documentation by default recommends that you replace the xfbml tags immediately with facebook like buttons as soon as the page is loaded. Therefore it has

    xfbml  : true  // parse XFBML

as option to almost all mentions of calling FB.init. You don't want that.

If you have so many like buttons it is quite likely that you don't need to load all of them initially. The JavaScript SDK offers a function for parsing and replacing the fbxml explicitly. You can call it on a certain DOM node instead of the whole page. See FB.XFBML.parse. This way you can load the buttons when you need them, you could even lazily only load those that are currently visible in the browser similar to image lazy loading techniques.

I think the performance might be slow because the Facebook Like button is loaded in an iframe which takes a lot longer to load. I'm not sure if there is an option like this in the graph api but consider making a custom like button by loading the Like information on the server side.

http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

I realise this is an old question, but socialite.js seems like it might do the trick:

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

If you're selling your soul, you may as well do it asynchronously. Socialite won't cause document rendering to hang while waiting for 50kb of social media.