我的社交分享链接需要很长时间才能加载到我的页面上(它仍然在我的沙盒中,所以我无法提供访问权限)。浏览所有三个主要参与者,他们都在使用getElementsByTagName
并搜索页面的所有元素。
由于我已经为所有社交实例分配了类,我不能调整函数以仅查看具有正确类的元素吗?
也许这不会看到巨大的速度改进,但我想尽可能地挤出每一毫秒的性能。
Facebook async 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 async 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>`
刚刚遇到了几乎相同的事情。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'));
首先,我怀疑是 DOM 遍历真正减慢了速度(DOM 遍历在现代浏览器中通常很快)——通常是对 iframe 源的 HTTP 请求使用户看起来"慢"。
但如果你想试一试,你可以为Facebook做些什么(如果其他人提供类似的东西,你必须看看他们的文档):
在没有 xfbml=1 的情况下初始化 JS SDK,那么它将不会查看您的文档以查找 XFBML 标签以自动呈现。
使用FB。XFBML.parse之后。不幸的是,此方法只接受对单个 DOM 元素的引用作为参数 - 因此您不能向它传递诸如"选择器"之类的东西。但是你可以使用 jQuery 或其他东西来获取页面中的相关元素,然后在循环中对每个元素调用该方法。
但是,正如我在开始时所说 - 我怀疑它会显着加快速度。