2012-08-17 65 views
1

我試圖加載我的網頁上的所有Facebook/Twitter /谷歌工具異步,以阻止他們減緩頁面加載。我認爲我有正確的代碼來做到這一點,但它似乎不起作用。異步加載的Javascript

所有的代碼位都在一個PHP在一起有這樣的:

<!-- Facebook --> 
<div id="fb-root"></div> 
<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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script> 

<!-- Google +1 --> 
<script type="text/javascript"> 
    window.___gcfg = {lang: 'en-GB'}; 
    (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> 

<!-- Twitter --> 
<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> 

<!-- Analytics --> 
<script type="text/javascript"> 
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']); 
    _gaq.push(['_trackPageview']); 
    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 
</script> 

當我測試上webpagetest.org一個頁面的頁面加載時間約爲5秒,我可以看到有在頁面完成之前發生的對Facebook等人請求的流量負載。當我刪除腳本時,頁面加載速度降低到更可敬的1.9秒。

是我嗎?

+0

你的問題是, 「是我嗎?」。我不知道你的意思,所以我只是猜測50%的可能性是正確的。 – 2012-08-17 12:55:33

回答

1

你可以做一兩件事:

<html> 
    <head> 
    </head> 
    <body> 
     .... 
     .... 
     <script src='http://....'/> 
     <script src=''/> 
    </body> 
</html> 

它加載頁面的一項重要內容,之後將immedeately加載腳本。 您可以按照這種方式加載您的內容和腳本的優先級。

+0

是的,如果你想在腳本標籤中寫入JavaScript,你可以在標籤內寫入腳本並忽略'url'屬性。 – 2012-08-17 12:59:20

1

您也可以嘗試使用JavaScript 延遲屬性:

<script defer="defer"></script> 
1

現代瀏覽器,你也可以使用

<script type="text/javascript" async src="..."></script>