JavaScript in <head>或只是之前</body>？

我即將踏上新的web項目，我打算使用下面的方案把我的JS-腳本在頭尾體前：JavaScript in <head>或只是之前</body>？

的腳本，爲的UX的必要頁面在頭上。正如我已經仔細閱讀網頁 - 頭部中的腳本在頁面加載之前加載，因此將對用戶體驗至關重要的腳本放在那裏是有意義的。
對於頁面的設計和UX（Google Analytics腳本等）非必不可少的腳本會在</body>之前。

這是一個明智的做法嗎？

另一種方法是將所有腳本放在<head>中，並將延遲屬性添加到非必要腳本中 - 但我讀過FF的舊版本沒有選擇延遲屬性。

來源

2011-10-13 timkl

我也想知道這一點。 –

我認爲這是一個完全可以接受的方法。我在某個地方看到，「延期」在很多瀏覽器上都不起作用，但我可能是絕望的錯誤。 – Bojangles

我想這一切都是關於品味。我親自將它們添加到body標籤（頭部）之前，並在頁面內部添加需要的小片段。 – ikromm

我想很多開發人員在</body>之前運行javascript，以便在渲染完所有元素之後運行它。

但是，如果您正確組織您的代碼，頁面上的位置並不重要。

例如，使用jQuery的時候，你可以確保代碼不會跑，直到頁面和它的元素通過執行以下完全呈現：

$(document).ready(function(){ 
    //Code here 
});

然後腳本參考可以放在head標籤。

更新 - 應在</body>之前引用腳本標記。這可以防止腳本加載時的渲染阻塞，並且對於站點感知速度更好。

使用此技術時不應使用突兀的JavaScript。

來源

2011-10-13 08:51:19 Curt

+19

不要忘記，將腳本移動到底部時內容加載速度更快。假設ajax沒有被用來加載頁面的默認內容。 – daveyfaherty

即使使用DOMReady，位置也是非常重要的。很多開發人員在''之前放置了JavaScript標記，因爲所有腳本都是同步加載並執行**。當他們在''時，頁面呈現停止下載→解析→執行每個腳本。 – Lapple

（打樁於...）將SCRIPT放在頁面底部的主要原因不在於確保DOM已加載（儘管是一個重要原因），更關注的是使頁面看起來很有迴應性。如果您在頁面頂部加載腳本，瀏覽器會先下載腳本，然後您的內容會一直等到下載完畢 - 這會導致APPEAR頁面加載速度變慢，從而導致用戶不快。 – kingdango

我會說這是完全合理的。正如你所說，只要你不移動基本腳本（例如jQuery，Modernizr等等）從<head>出來，你應該沒有問題。

將非必要腳本移動到頁面底部應該有助於提高加載速度（即最小化/連接腳本）。

來源

2011-10-13 08:47:53 Conan

將Javascript放在一個單獨的文件中，並在HTML的頭部添加一個鏈接。

來源

2011-10-13 08:49:10

這一切都取決於您所說的「UX必不可少」。例如，我同意modernizr早期出現，但並非所有事情都需要立即加載。如果您試圖避免使用無格式文本（FOUT），這是一個很好的理由。同樣，如果您的腳本在用戶執行任何操作之前會影響頁面的外觀，您應該儘早加載。

不要忘了，速度是UX的一部分。當用戶看不到它所適用的內容時，準備好運行一些jquery交互是沒有好處的。在結束開始加載腳本之間的區別僅需幾秒鐘。如果您首先加載頁面，則用戶將使用這些秒鐘來接入頁面，從而允許您不加介入地加載腳本。

如果您將腳本移動到頁面底部，那麼您的頁面加載速度會更快，並且這對目前的頁面排名有所幫助。

另外，如果您嘗試在引用的元素加載之前運行腳本，某些版本的IE將會拋出錯誤。

就像埃德說的，你的腳本應該存儲在一個單獨的文件中，並儘可能少的文件。

來源

2011-10-13 08:53:22 daveyfaherty

JavaScript應放置在文檔的末尾，以便它不會延遲並行加載頁面元素。這然後要求js以特定的方式寫入，但它確實提高了頁面加載的速度。

此外，理想情況下，您可以在不同的（子）域下託管這樣的參考。對jQuery的引用也應該指向Google的CDN。

有關更多信息，請參見http://developer.yahoo.com/performance/rules.html。

來源

2011-10-13 08:53:50 Digbyswift

想要在</body>之前放置腳本的原因之一是，如果他們在沒有用戶交互的情況下操縱DOM，則需要加載DOM才能被操縱。另一種方法是添加一個事件監聽器並在頁面加載時運行腳本，但是這需要額外的代碼，如果你有很多腳本，尤其是那些你自己沒有編寫的代碼，這可能會變得複雜。將它們放在頁面的末尾也會加快頁面加載速度，但在DOM操作腳本的情況下，您可能會得到一些不那麼漂亮的結果。

來源

2011-10-13 08:59:34 Nikoloff

您需要在答案中的''標籤周圍加反引號（''）。 – naught101

JavaScript in <head>或只是之前</body>？

回答

相關問題