Question

我的社交分享链接永远需要加载到我的页面上（它仍然在我的沙箱中，因此我无法提供访问权限）。浏览所有三个主要参与者，他们都使用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>`

Answer 1

刚刚遇到了同样的事情。 CSS-Tricks有一段代码：

(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'));

Answer 2

首先，我怀疑DOM遍历真的会降低速度（在现代浏览器中DOM遍历通常很快） - 通常是对iframe源的HTTP请求使得它看起来对用户来说“慢”。

但如果你想尝试一下，这就是你可以为Facebook做些什么（如果其他人提供类似的东西，你必须查看他们的文档）：

在没有 xfbml = 1的情况下初始化JS SDK ，然后它不会查看您的文档以自动呈现XFBML标记。

之后使用FB.XFBML.parse。不幸的是，这个方法只接受对单个DOM元素的引用作为参数 - 所以你不能传递它像“选择器”之类的东西。但是你可以使用jQuery或其他东西来获取页面中的相关元素，然后在循环中调用每个方法。

但是，正如我在开始时所说的那样 - 我怀疑它会明显加快速度。

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

2 个答案: