Performance 网页上30个类似Facebook的按钮会让浏览器负担过重吗?

Performance 网页上30个类似Facebook的按钮会让浏览器负担过重吗?,performance,facebook,button,facebook-like,Performance,Facebook,Button,Facebook Like,在一个包含大约30个条目列表的页面上,每个条目都是Facebook likable(每个条目的HTML包含一个Like按钮),并且每个条目要么显示要么不显示(取决于过滤器设置): 完全加载页面需要几秒钟 该页面使用了大量内存,这多亏了Like按钮 即使用户不进行交互,页面也会使用CPU(每100ms或更短时间,一个类似的按钮会使用Javascript触发一个事件) 如果我不更改DOM树,只更改元素可见性,那么按钮似乎会被重新加载 在内存超过1 GHz和1 GB的PC上,该页面无法使用,因为它

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

  • 完全加载页面需要几秒钟
  • 该页面使用了大量内存,这多亏了Like按钮
  • 即使用户不进行交互,页面也会使用CPU(每100ms或更短时间,一个类似的按钮会使用Javascript触发一个事件)
  • 如果我不更改DOM树,只更改元素可见性,那么按钮似乎会被重新加载
在内存超过1 GHz和1 GB的PC上,该页面无法使用,因为它太慢(浏览器:Chromium)。我怎样才能改变这个,保留类似的按钮

  • 责怪Facebook的“喜欢” 实施
  • 每晚下载Firefox或“极光”,查看“关于:内存”选项卡,了解“喜欢”按钮对内存的影响。(Firefox已将每个隔间的内存报告添加到大约:内存)

  • 我认为性能可能会很慢,因为类似Facebook的按钮加载在iframe中,加载时间要长得多。我不确定在图形API中是否有这样的选项,但是考虑通过在服务器端加载类似的信息来制作自定义按钮。


    使用JavaScript SDK

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

    最初不要加载它们,需要时请显式加载它们

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

        xfbml  : true  // parse XFBML
    
    作为几乎所有提到调用FB.init的选项。你不会想要的


    如果您有这么多相似的按钮,那么您很可能不需要一开始就加载所有按钮。javascriptsdk提供了一个显式解析和替换fbxml的函数。您可以在某个DOM节点而不是整个页面上调用它。看见通过这种方式,您可以在需要时加载按钮,您甚至可以懒洋洋地只加载浏览器中当前可见的按钮,这与图像懒洋洋加载技术类似。

    我意识到这是一个老问题,但似乎它可以做到这一点:

    社交网站提供了一种非常简单的方式来实现和激活过多的社交分享按钮——随时都可以。文档加载、文章悬停、任何事件

    如果你在出卖你的灵魂,你还不如异步地去做。社交名流在等待50kb的社交媒体时不会导致文档呈现挂起


    是啊,这会毁了你的记忆。这太可怕了。