在</head>標籤與</body>標籤之前包含Javascript的優缺點是什麼？

編輯：雖然這個問題已經被問和之前（1）回答，（2），（3），答案都沒有提到包括在<head>文件時使用異步和/或延遲加載的可能性。由於Google Analytics（分析）使用這兩種方法的新代碼，系統提示我提問。在</head>標籤與</body>標籤之前包含Javascript的優缺點是什麼？

我最近注意到，谷歌Analytics（分析）現在建議包括</head> tag之前它的JavaScript代碼段。他們過去建議在</body>標籤之前包含摘錄。

的YUI Best Practices for Speeding Up Your Web Site建議把腳本作爲遠了儘可能靠近頁面，因爲腳本可以阻止並行下載：

造成腳本的問題是，他們阻止並行下載。 HTTP/1.1規範建議瀏覽器每個主機名並行下載至少兩個組件。如果您從多個主機名提供圖像，則可以同時發生兩個以上的下載。然而，當腳本正在下載時，瀏覽器將不會啓動任何其他下載，即使是在不同的主機名上。

谷歌表示：

之一異步代碼段的主要優點是，你可以在HTML文檔的頂部位置吧。這增加了在用戶離開頁面之前發送跟蹤信標的可能性。通常將JavaScript代碼放置在<head>部分，我們建議將代碼段放在<head>部分的底部以獲得最佳性能。

通常我更關心的是用戶體驗和頁面加載速度比確保每個跟蹤信標發出，因此這將推動我向包括指向頁面底部的谷歌分析腳本，而不是在<head>，對不對？

我相信還有更多的事情要考慮，而不是這兩個觀點。影響你的是什麼？有什麼要考慮的事情？

那麼，在之前與</body>之間的權利對比有什麼優點和缺點？

來源

2010-07-29 Peter Ajtai

http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body – 2010-07-29 23:50:45

@Amr - 那回答那個問題不包括腳本的異步或延遲加載。 – 2010-07-29 23:57:28

關於<head>的建議不是LINK TO EXTERNAL需要下載的腳本。這會阻止並行下載。 Google的最新跟蹤代碼使用lazy loading，並且不會阻止並行下載。

(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); 
    })();

來源

2010-07-29 23:37:29

在<head>把腳本將迫使瀏覽器，它呈現的頁面，並阻止並行下載前，下載文件。如果您將腳本放在</body>標記末尾之前，那麼瀏覽器會在您的內容之後解析這些腳本，這會導致頁面加載速度更快。

通過使用自執行匿名功能async=true，您不會阻止並行下載。

對於非常複雜的應用程序，如果您需要在啓用JS的情況下隱藏模塊，則可以在</body>之前放置腳本。

<head> 
<script>document.documentElement.className+='js';</script> 
<style>html.js #modal { display:none; }</style> 
</head>

如果上面的代碼放在</body>之前它不會盡快如果它是在頭解析。在你準備好的時間方面，你可能會注意到某些情況和不一致之處。

來源

2010-07-29 23:42:58

我的猜測，除了對方是什麼人都表示，到目前爲止是這樣的分析可以更準確地跟蹤訪問。有時候有人會在整個頁面下載之前去一個網站離開。如果他們這樣做的話，他們下載跟蹤代碼的機會越大，越接近頁面頂部。這應該有助於那些分析統計數據的人看到跳出率。如果您注意到您的跳出率很高（頁面上的時間很短），則可能表明您的頁面對於大多數觀衆而言耗時過長，並且應該提醒您採取措施加快頁面加載速度。

來源

2010-07-29 23:46:46 Jason

在</head>標籤與</body>標籤之前包含Javascript的優缺點是什麼？

回答

相關問題