30 Facebook页面上的按钮会使网络浏览器负担过重？

Question

在包含大约30个条目的列表的页面上,每个条目都是Facebook可爱的(每个条目的HTML包含一个Like按钮),并且每个条目是否显示(取决于过滤器设置):

• 该页面需要几秒钟才能完全加载
• 由于Like按钮,页面使用了大量内存
• 即使用户没有进行交互,页面也会使用CPU(每100毫秒或更少,其中一个Like按钮使用Javascript触发事件)
• 如果我不更改DOM树,只需更改元素可见性,无论如何都会重新加载按钮

在具有1 GHz以上和1 GB内存的PC上,该页面无法使用,因为它太慢(浏览器:Chromium).如何改变这一点,保持Like按钮？

Answer 1

1. 归咎于Facebook的"赞"实施
2. 下载Firefox Nightly或'Aurora',然后查看"about:memory"选项卡,了解"赞"按钮对内存的影响.(Firefox已将每个分区的内存报告添加到:内存)

Answer 2

使用JavaScript SDK

确保通过xfbml和JavaScript SDK包含类似的按钮.这样您就可以更好地控制它们.

最初不要加载它们,在需要时明确加载它们

此外,默认情况下,文档建议您在加载页面后立即使用类似Facebook的按钮替换xfbml标记.因此它有

    xfbml  : true  // parse XFBML

作为几乎所有提及调用FB.init的选项.你不希望这样.

如果你有这么多像按钮,很可能你最初不需要加载所有按钮.JavaScript SDK提供了一个用于显式解析和替换fbxml的函数.您可以在某个DOM节点而不是整个页面上调用它.请参见FB.XFBML.parse.通过这种方式,您可以在需要时加载按钮,甚至可以懒得只加载浏览器中当前可见的那些按钮,类似于图像延迟加载技术.