2013-02-15 41 views
0

我是優化我的網站我正在使用Google Analytics工具來檢查分數。推遲使用Javascript來優化網站

我提到了很多文章,也研究了stackoverflow.com,但沒有得到任何適當的解決方案。

我的問題是我已經把所有的.js文件放在頁尾附近關閉body標籤,但分析說推遲使用Javascript並給出了一個js文件列表。如下圖所示在aspx文件

代碼:

<body> 
    <script type="text/javascript" src="js/default.js"></script> 

    <script type="text/javascript" src="js/jquery.js"></script> 

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

    <script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-35073844-1']); 
    _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> 

</body> 

我也試過defer屬性但在比分沒有變化。

我也嘗試過的JavaScript代碼,如下圖所示:

<script type="text/javascript"> 

// Add a script element as a child of the body 
function downloadJSAtOnload() { 
var element = document.createElement("script"); 
element.src = "js/jquery.prettyPhoto.js"; 
document.body.appendChild(element); 
} 

// Check for browser support of event handling capability 
if (window.addEventListener) 
window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 

</script> 

,但仍然沒有改變。

我可以得到一些關於推遲JavaScript的鏈接來徹底理解它嗎?

我沒有太多的JavaScript經驗。

請幫忙。謝謝。

+0

爲什麼你需要優化網站,腳本加載速度是否太慢? – Bergi 2013-02-15 13:52:27

+1

[這裏是關於JavaScript解析推遲的文檔](https://developers.google.com/speed/docs/best-practices/payload#DeferParsingJS)。就我個人而言,我發現它是[pagespeed](https://developers.google.com/speed/pagespeed/)最難的目標之一。 – 2013-02-15 13:54:37

+0

分析工具在許多困難的代碼中犯了錯誤。也因爲是說讓代碼推遲並不意味着你能夠做到這一點,並運行你的網站。 – Aristos 2013-02-15 15:35:23

回答

0

你不提你是歷史上不支持所有瀏覽器延遲,但支持其測試瀏覽器是現在好多了(http://caniuse.com/script-defer

Aarron彼得斯寫了一個很好的職位上defering JS直到onload事件發射http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough

他的代碼基本上是這樣的:

<script> 
(function(w, d, s) { 
    function go(){ 
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { 
    if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.src = url; js.id = id; 
     fjs.parentNode.insertBefore(js, fjs); 
    }; 
    load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk'); 
    load('https://apis.google.com/js/plusone.js', 'gplus1js'); 
    load('//platform.twitter.com/widgets.js', 'tweetjs'); 
    } 
    if (w.addEventListener) { w.addEventListener("load", go, false); } 
    else if (w.attachEvent) { w.attachEvent("onload",go); } 
}(window, document, 'script')); 
</script> 

個人而言,我更喜歡的聲明指定點的方式,該元素推遲到如defer="onload"但它帶有一些問題。

+0

-在哪裏應該將此代碼粘貼到我的aspx頁面中,在或 ??? – Khushbu 2013-02-16 12:05:09

+0

我在瀏覽器chrome,mozilla和IE上測試。 – Khushbu 2013-02-16 12:06:50

+0

和我有更多的js文件,我應該包括他們所有的這些代碼,就像你展示plusone.js和widgets.js? – Khushbu 2013-02-16 12:09:27