javascript - 社交插件(Fb、Twitter、Google)为我的网站增加了 3 秒的加载时间。推迟他们？

Question

我知道您可以使用 defer=""html 属性来延迟 javascript 文件，但它仅在 IE 中受支持(笑)，并且只会延迟 javascript 文件，我需要延迟整个插件的加载。

有什么办法可以做到这一点吗？我喜欢 Facebook 集成等等，但是插件太慢了。它使加载时间增加了一倍以上。

谢谢!~ jackson

<div class="socialplugins"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="DesignSweeter">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div class="socialplugins">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=218305128208494&amp;xfbml=1"></script><fb:like href="http://designsweeter.com/" send="false" layout="box_count" width="55" show_faces="true" font=""></fb:like>
</div>

<div class="socialplugins">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" count="true"></g:plusone>
</div>

注意:.socialplugins 类仅用于在我的标题中定位。

Answer 1

以非阻塞方式动态加载 javascript 文件:

http://berklee.github.com/nbl/

或

https://github.com/rgrove/lazyload/

这个技术有点像这样:

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "file1.js";
 document.getElementsByTagName("head")[0].appendChild(script);

这个新元素加载源文件 file1.js。文件开始下载一旦元素被添加到页面。这项技术的重要之处是文件下载和执行时没有阻塞其他页面进程，无论下载是从哪里开始的。您甚至可以将此代码放在 在不影响页面其余部分的情况下删除文档(除了一个 HTTP用于下载文件的连接)。

这本书:"High Performance JavaScript" by Nickolas Zakas 有很多关于 JavaScript 性能优化的有趣信息。