通过定义要查看的类来加速 Facebook / Twitter / G+ 按钮答案

【问题标题】：Speed Up Facebook / Twitter / G+ Buttons By Defining Classes to Look In通过定义要查看的类来加速 Facebook / Twitter / G+ 按钮
【发布时间】：2012-09-22 22:22:12
【问题描述】：

我的社交分享链接需要很长时间才能加载到我的页面上（它仍在我的沙箱中，所以我无法提供访问权限）。查看所有三个主要参与者，他们都在使用getElementsByTagName 并且正在搜索页面的所有元素。

既然我已经为所有社交实例分配了类，我不能只调整函数以仅查看具有正确类的元素吗？

也许这不会显着提高速度，但我想尽可能地利用每一毫秒的性能。

Facebook 异步 JavaScript：

<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=356176301083466";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
</script>

Twitter 异步 JavaScript：

<script>
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }(document,"script","twitter-wjs");
</script>

Google+ 异步 JavaScript：

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); 
        po.type = 'text/javascript'; 
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(po, s);
    })();
</script>`

【问题讨论】：

标签： javascript twitter facebook-like google-plus-one getelementsbytagname

【解决方案1】：

刚刚遇到几乎相同的事情。 CSS-Tricks 有一个 sn-p：

(function(doc, script) {
var js, 
  fjs = doc.getElementsByTagName(script)[0],
  frag = doc.createDocumentFragment(),
  add = function(url, id) {
      if (doc.getElementById(id)) {return;}
      js = doc.createElement(script);
      js.src = url;
      id && (js.id = id);
      frag.appendChild( js );
  };
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));

【讨论】：

【解决方案2】：

首先，我怀疑是 DOM 遍历真正减慢了速度（DOM 遍历在现代浏览器中通常很快）——通常是对 iframe 源的 HTTP 请求让用户看起来“慢”。

但是，如果您想尝试一下，可以为 Facebook 做以下事情（如果其他人提供类似的东西，您必须查看他们的文档）：

在没有 xfbml=1 的情况下初始化 JS SDK，那么它就不会在您的文档中查看 XFBML 标记以自动呈现。
之后使用FB.XFBML.parse。不幸的是，这个方法只接受对单个 DOM 元素的引用作为参数——所以你不能传递像“选择器”之类的东西。但是您可以使用 jQuery 或其他东西来获取页面中的相关元素，然后在循环中对每个元素调用该方法。

但是，正如我在开头所说的那样——我怀疑它会显着加快速度。

【讨论】：