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

Question

我知道你可以使用defer =""html属性来推迟javascript文件,但它只支持IE(lol)并且只会推迟javascript文件,我需要推迟整个插件加载.

有没有办法做到这一点？我喜欢Facebook整合等等,但是plguins很慢.它使加载时间增加了一倍以上.

谢谢!〜杰克逊

<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 连接）。

这本书：Nickolas Zakas的《高性能 JavaScript》有很多关于 JavaScript 性能优化的有趣信息。