其中一些服务已经(明智地)以异步方式提供其脚本,这只是将它们组合成更有效、更井然有序、更易于理解的代码。
(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('https://apis.google.com/js/plusone.js');
// Facebook SDK
add('//127.0.0.1/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'));
我是在浏览一些网站代码时发现的,我不记得是谁最初做到了这一点,但它看起来像尼古拉斯·加拉格尔或马蒂亚斯·拜恩斯的作品。如果我错了,请纠正我。
你需要在 HTML 中放置好脚本才能让它们放置内容
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<div class="g-plusone" data-size="medium" data-count="true"></div>
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-action="recommend"></div>
为什么你将“script”传递到匿名函数中?
这里解释了:http://mathiasbynens.be/notes/async-analytics-snippet 在这种情况下,没有真正的运行时性能提升,它只节省了几个字节。传递
document
避免了作用域查找,因此略微提高了运行时性能。因此,如果他将传入参数设置为单个字母,尤其是因为他使用了它不止一次,它将节省更多的字节。在这个例子中,它并没有真正帮助太多…
我应该在你的代码中写标签吗?
因为我可能很笨,但它们对我来说并不起作用。
我喜欢这个,非常有用。非常感谢。
嘿,克里斯,
你是对的——这是 尼古拉斯基于我对此主题(特别是关于 Google Analytics 代码段的)研究的通用异步脚本加载器函数。
:)
值得一提的是,它们仍然会阻止文档完成(加载)。亚伦·彼得斯对它进行了轻微的重构,以便在触发之前等待窗口加载以解决这个问题。
http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
但是,这种更改不会影响用户体验。请参阅那篇文章的评论。
有一个更好的添加按钮的方法!
基本上为所有社交图标创建一个本地托管的图像精灵。为计数获取提供一些 API。你会得到更轻、更简洁的代码(没有 iframe 等)。
我们已经有一个 WordPress 插件来添加各种社交网站的分享按钮,作为概念验证。
它被称为 rtSoical – http://wordpress.org/extend/plugins/rtsocial/
这真是太棒了!JavaScript 与正确 CSS 代码的完美组合。
比插件更好,因为插件通常会增加加载时间。
为什么使用
id && (js.id = id);
而不是if(id) js.id = id;
?它不会节省字节,而且我认为第二个更易读。
无论如何脚本很不错。
嗨
一个小问题:脚本运行得非常顺利,但我付出的代价是放弃了 twttr 变量。现在我想为 Twitter 按钮实现 Google Analytics (链接),所以我真的需要它。
在你看来,在保持通用性和简洁性的同时,获得这种功能的最佳方法是什么?
谢谢
我是一个 ASYNC 新手,也许我还没有完全理解它,但是…
我做了一个小测试,使用 ShareThis (http://www.sharethis.com/get-sharing-tools/) 和上面的 ASYNC 方法加载所有必要的分享 JS 来比较加载时间/大小…
使用 5 个分享按钮(FB、LinkedIn、Pinterest、Google + 和 Twitter),使用上面的方法加载大小增加了大约 5%。
也许值得进行自己的测试,但这为我解答了一些问题。我得出结论,使用 ShareThis 在使用多个分享按钮时有助于提高性能。我不能说在使用一两个精选按钮的情况下也是如此。
这个结论正确吗?还是我错过了 ASYNC 的要点?
你好,异步加载了 jquery.min.js 但正在工作吗? 这样
script async src=’/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/
不起作用 :( 还有这样
(function(){var po=document.createElement(‘script’);po.type=’text/javascript’;po.async=true;po.src=’ bla bla’;var s=document.getElementsByTagName(‘script’)[0];s.parentNode.insertBefore(po,s)})();
有什么想法吗?,,
关于马特的问题的回答,
据我所知,异步代码的目的不是让社交按钮加载得更快或更小,而是为了防止社交按钮的加载时间减慢页面其他内容的加载时间。由于社交按钮需要联系几个不同的服务器(Facebook、Google、Twitter 等),因此加载它们可能需要额外的时间。在传统的加载方式中,整个页面都会停止加载,直到按钮加载完毕。这样,按钮和页面就可以同时加载,这样主要页面内容的加载速度就不会受到负面影响。
好文章。谢谢克里斯。
我们也可以将 Google Analytics 监控代码添加到其中,并将它们合并为单个脚本以托管到外部 .js 文件中吗?
这种技术会降低 http://www.urgentfiles.com/ 的加载速度吗?
嗨,克里斯·科耶,
我计划在这个月发布一个网站。我想让它支持移动设备。你推荐哪个框架?