问题
Google pagespeed is complaining about my facebook like button script. How can I defer the script?
45KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. http://static.ak.facebook.com/.../xd_arbiter.php?... (21KiB of inline JavaScript) https://s-static.ak.facebook.com/.../xd_arbiter.php?... (21KiB of inline JavaScript) http://www.facebook.com/.../like.php?... (3KiB of inline JavaScript)
Here's the code I'm using and I'm loading it into a .js file in the footer of my page.
(function(d,s,id){
var js,fjs = d.getElementsByTagName(s)[0];
if(d.getElementById(id)){return;}
js=d.createElement(s);
js.id=id;
js.async=true;
js.defer=true;//THIS DOES NOT APPEAR TO SATISFY PAGESPEED
js.src="//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js,fjs);
}
(document, "script", "facebook-jssdk")
);
Results in the following script tag (via Chrome's inspector):
<script
id="facebook-jssdk"
async=""
defer=""
src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>
回答1:
Use the setTimeout luke!
setTimeout( function () {
(function(d,s,id){
// load js
...
}
(document, "script", "facebook-jssdk")
);
}, 3000);
You can throw the load in another 'thread' to async or Defer it
回答2:
setTimeout works but it's not real defer, since if the page finished loading after the time set (in this case 3 seconds) the like button will be loaded before the page finished loading.
I put the like button's javscript code inside my own function and nested it inside the
<script>
function FbButtonLoad(){
(function(d,s,id){
// load js
...
}
(document, "script", "facebook-jssdk")
);
}
</script>
then I set it in the body tag to run on page load:
<body onload="FbButtonLoad();">
The button appears on the page where I left it's containers:
<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div>
回答3:
Another slightly less than perfect solution (HTML5 only) would be to load the library on DOMContentLoaded.
document.addEventListener('DOMContentLoaded', function() {
(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";
fjs.parentNode.insertBefore(js,fjs);
}
(document, "script", "facebook-jssdk")
);
来源:https://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script