3

我的社交分享链接要花很长时间才能加载到我的页面上（它仍在我的沙箱中，所以我无法提供访问权限）。浏览所有三个主要参与者，他们都在使用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>`
4

2 回答 2

2

刚刚遇到几乎相同的事情。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'));
于 2012-09-25T19:53:24.467 回答
0

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

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

  • 在没有xfbml=1的情况下初始化 JS SDK ，那么它将不会在您的文档中查看 XFBML 标签以自动呈现。

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

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

于 2012-09-23T14:13:10.433 回答