不引人注目的JavaScript：HTML代碼頂部或底部的<script>？
[英]Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
問題描述
我最近閱讀了雅虎宣言加速你的網站的最佳實踐 。 他們建議我們盡可能將JavaScript包含在HTML代碼的底部。
但究竟何時何地？
我們應該在關閉</html>還是之后？ 最重要的是，我們什么時候應該把它放在<head>部分？
7 個解決方案
解決方案1
85 已采納 2008-09-27 12:17:27
真正不引人注目的腳本有兩種可能性：
- 通過head部分中的腳本標記包含外部腳本文件
- 通過主體底部的腳本標簽包含外部腳本文件（在
</body></html>）
第二個可能會更快，因為最初的雅虎研究表明，一些瀏覽器嘗試在腳本文件到達腳本標簽時加載腳本文件，因此在完成之前不會加載頁面的其余部分。 但是，如果您的腳本具有“就緒”部分，該部分必須在DOM准備就緒后立即執行，您可能需要將其置於頭部。 另一個問題是布局 - 如果您的腳本要更改您希望盡早加載的頁面布局，那么您的頁面不會花費很長時間在用戶面前重繪自己。
如果外部腳本站點位於另一個域（如外部窗口小部件）上，則可能值得將其放在底部以避免延遲加載頁面。
對於任何性能問題， 請執行您自己的基准測試 - 在完成研究時可能會出現的情況可能會因您自己的本地設置或瀏覽器更改而發生變化。
解決方案2
31 2008-09-27 12:36:17
它永遠不會如此剪切和干燥 - 雅虎建議將腳本放在結束</body>標記之前，這會產生錯誤，即頁面在空緩存上加載速度更快（因為腳本不會阻止下載文檔的其余部分） ）。 但是，如果您想要在頁面加載時運行某些代碼，它將僅在整個頁面加載后開始執行。 如果將腳本放在<head>標記中，它們將在之前開始執行 - 因此在已准備好的緩存中，頁面實際上似乎加載得更快。
此外，將腳本放在頁面底部的權限並不總是可用。 如果您需要在視圖中包含依賴於庫或之前加載的其他JavaScript代碼的內聯腳本，則必須在<head>標記中加載這些依賴項。
總而言之，雅虎的建議很有意思，但並不總是適用，應根據具體情況加以考慮。
解決方案3
20 2009-05-03 08:36:22
正如其他人所說，將它放在關閉體 html標簽之前。
有一天，我們接到客戶的大量電話，抱怨他們的網站非常慢。 我們在本地訪問了他們，發現他們花了20-30秒來加載一個頁面。 認為服務器性能不佳，我們登錄了 - 但是web和sql服務器的活動都是~0％。
幾分鍾后，我們意識到外部網站已關閉，我們正在鏈接到Javascript跟蹤代碼。 這意味着瀏覽器會訪問站點頭部的腳本標記並等待下載腳本文件。
因此，至少對於第三方/外部腳本，我建議將它們作為頁面上的最后一件事。 然后，如果它們不可用，瀏覽器至少會加載頁面直到那一點 - 並且用戶將忘記它。
解決方案4
16 2012-01-27 15:32:10
總結一下，基於以上建議：
- 對於外部腳本（Google分析，第三方營銷跟蹤器等），請將它們放在
</body>標記之前。 - 對於影響頁面布局的腳本，請放在頭部。
- 對於依賴於“dom ready”（如jquery）的腳本，請考慮在
</body>之前放置，除非您有將腳本放在頭部的邊緣情況。 - 如果存在具有依賴項的內聯腳本，請將所需腳本放在頭部。
解決方案5
5 2008-09-27 12:07:23
不，它不應該在</html>因為那將是無效的。 放置腳本的最佳位置就在</body>
這基本上是因為大多數瀏覽器在評估您提供的腳本時停止呈現頁面。 因此可以將非阻塞代碼放在頁面的任何位置（我主要考慮將函數附加到onLoad事件的事情，因為事件綁定非常快，實際上是免費的）。 這里的一個重要殺手就是在頁面的開頭放入一些廣告服務器腳本，這可以防止在廣告完全下載之前加載任何頁面，從而使您的頁面加載次數增加
解決方案6
5 2008-09-27 12:24:46
如果你想修改你的腳本的位置，YSlow是一個偉大的工具，如果它會改善或損害性能，給你一個味道。 將javascript放在某些文檔位置可能會導致頁面加載時間過長。
解決方案7
2 2008-09-27 12:04:53
如果你把它放在底部，它最后加載，因此加快了用戶可以看到頁面的速度。 它確實需要在最終的</html>之前，否則它將不是DOM的一部分。
如果現在需要代碼，那么就把它放在頭腦中。
最好將博客小部件放在底部，這樣如果它們不加載，就不會影響頁面的可用性。
ASP.NET MVC的新“不引人注目的”JavaScript會使我的HTML代碼無效嗎？
[英]Will ASP.NET MVC's new “unobtrusive” JavaScript make my HTML code invalid?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.