30 Facebook像網頁上的按鈕負擔過重web瀏覽器？

Question

在包含約30個條目列表的頁面上，每個條目都與Facebook類似（每個條目的HTML包含一個Like按鈕），並且它們中的每個條目都顯示與否（取決於濾鏡設置）：

• 頁面需要幾秒鐘才能完全加載
• 該頁面使用大量的內存，這要歸功於像按鈕
• 該頁面使用CPU，即使用戶不進行交互（每100ms或更少，一個Like按鈕使用Javascript觸發事件）
• 如果我不更改DOM樹，只需更改元素可見性，這些按鈕似乎無論如何都會重新加載

在具有超過1 GHz和1 GB內存的PC上，由於頁面速度太慢（瀏覽器：Chromium），因此該頁面無法使用。我怎樣才能改變這一點，保持Like按鈕？

Answer 1

1. 怒其不爭的Facebook的「Like」 實施
2. 下載火狐每晚或「極光」，並期待在「有關：內存」選項卡來獲得的「贊」按鈕的記憶影響的想法。 （Firefox已經將每隔區內存報告添加到大約：內存中）

Answer 2

我認爲性能可能會很慢，因爲Facebook Like按鈕加載到iframe中需要花費很多時間加載。我不確定圖表api中是否有這樣的選項，但可以考慮在服務器端加載Like信息來製作像按鈕一樣的自定義按鈕。

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

Answer 3

使用JavaScript SDK

確保包括通過XFBML和JavaScript SDK等等按鈕。這樣你可以更好地控制它們。

最初不加載它們，當你需要他們

而且默認的文檔建議您立即與像Facebook的按鈕，只要頁面加載更換XFBML標籤明確地加載它們。因此它有幾乎所有提到調用FB.init的選項

xfbml : true // parse XFBML 

。你不想那樣。

如果你有很多像按鈕那樣，很可能你不需要首先加載所有的按鈕。 JavaScript SDK提供了一個用於顯式解析和替換fbxml的函數。您可以在某個DOM節點上調用它，而不是整個頁面。見FB.XFBML.parse。通過這種方式，您可以在需要時加載按鈕，甚至可以僅延遲加載瀏覽器中當前可見的那些與圖像惰性加載技術類似的按鈕。

Answer 4

我意識到這是一個老問題，但socialite.js好像它可能做的伎倆：

社會名流提供了實現和激活社交分享按鈕過多一個非常簡單的方法 - 你希望的任何時候。在文件加載，文章懸停，任何事件！

如果你賣掉你的靈魂，你可以做到異步。在等待50kb的社交媒體時，Socialite不會導致文檔呈現掛起。