我應該在正文還是HTML頭部寫腳本？

我已經看到了兩種方式，兩種實現工作只是結構有點不同。在你的經驗中，哪些更好，爲什麼？我應該在正文還是HTML頭部寫腳本？

來源

2010-08-20 Khoi

看到很好的解釋和建議：http://stackoverflow.com/a/24070373/548473 – GKislin 2016-12-18 21:02:17

我會用多個選項來回答這個問題，其中的一些實際上會在主體中呈現。

將庫腳本（如jQuery庫）放置在頭部分中。
將普通腳本放在首位，除非它成爲性能/頁面加載問題。
與包含相關聯的地方腳本，包含在內部和結尾處。其中一個例子是。asp.net頁面中的ascx用戶控件 - 將腳本放在該標記的末尾。
將腳本影響頁面呈現在主體的末尾（正文關閉之前）。
不要將腳本放在標記中，例如<input onclick="myfunction()"/> - 最好將它放在腳本主體中的事件處理程序中。
如果您無法做出決定，請將其置於首位，直到您有原因不會發生頁面阻塞問題。

腳註：「當你需要它，而不是之前」適用於最後一個項目時，網頁阻止（感性的載入速度） - 用戶感知是thier現實，如果percieved加載速度更快，但它加載速度更快（儘管代碼中可能仍然有東西出現）。

編輯：引用：

asp.net討論：http://west-wind.com/weblog/posts/154797.aspx 這裏：http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
jQuery的文件準備好討論：http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
在這個問題上存在有效信息的其他答案也是如此。
使用www.google.com和www.bing.com搜索相關信息（有很多參考）

端注：如果您放置標記內腳本塊，它可以有效佈局某些瀏覽器通過佔用空間（ie7和opera9.2已知存在此問題），因此將它們放置在隱藏的div中（使用css類，例如：div上的.hide { display: none; visibility: hidden; }）

標準：請注意，標準允許放置如果有問題，腳本幾乎可以在任何地方阻止：http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html和http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

編輯2：請注意，只要有可能（總是？），您應該將實際的Javascript放在外部文件中並引用它們 - 這不會改變相關的序列有效性。

來源

2010-08-20 13:57:06

您是否有一個有關此頁面阻止問題或瀏覽器下載資源的更多信息的源代碼？ – Khoi 2010-08-20 14:08:32

@Khoi - 頁面呈現阻止是一個常見的記錄問題。編輯答案提供一些其他參考，因爲它在某種程度上取決於環境（平臺和瀏覽器/版本） – 2010-08-20 14:40:51

非常豐富。謝謝！ – Khoi 2010-08-21 01:25:15

頭部，或在貼身標籤之前。當DOM加載JS然後執行時，這正是jQuery document.ready所做的。

來源

2010-08-20 13:38:47

我總是把我的腳本放在標題中。我的理由：

我喜歡獨立的代碼和（靜態）文本
我通常從外部來源
相同的腳本是由幾頁使用加載我的劇本，所以感覺就像一個包含文件（這也在頭部）

來源

2010-08-20 13:40:07

W3Schools有nice article on this subject。在<head>

腳本

腳本的時候都稱爲，或當事件被觸發，被放置在功能被執行。

把你的功能放在這個部分，這樣他們都在一個的地方，而且他們不會干涉頁面的內容。

腳本在<body>

如果你不想你的腳本是放在函數內部，或者如果你的腳本應該寫頁面內容，它應放置在主體部分。

來源

2010-08-20 13:40:14 Vinz

+13

http://www.w3fools.com，要小心 – angabriel 2013-11-17 07:30:18

什麼廢話... – 2017-10-11 15:22:45

將腳本寫入頁面頂部的問題被阻止。瀏覽器必須停止處理頁面，直到腳本被下載，解析並執行。原因很明顯，這些腳本可能會在頁面中插入更多內容，以改變渲染結果，還可能會移除不需要渲染的內容等。

某些更現代的瀏覽器違反了此規則通過不阻止下載腳本（ie8是第一個），但總體而言，下載並不是大部分阻塞時間。

檢查出Even Faster Websites，我剛剛讀完它，它覆蓋了將腳本放到頁面上的所有快速方法，包括將腳本放在頁面底部以允許渲染完成（更好的UX）。

來源

2010-08-20 13:43:30

好的答案，在技術上把腳本放在標題是乾淨的，但是從最終用戶的角度來看，SEO將腳本放在文檔的底部，因爲最後一件事有許多好處。在我看到的一些頁面上，通過將腳本移動到底部，頁面的明顯響應性增加了很多倍。總體而言，它可能無法以更快的速度完全加載，但對於最終用戶來說，因爲他們看到的內容更快速！ – 2010-08-20 13:48:17

這似乎是相當真實的，我有問題延遲我的腳本執行，直到我所有的資源已被加載。而且我已經看到在腳本中加載了腳本的頁面，可以有效地加載資源。你能更清楚地解釋這一點嗎？ – Khoi 2010-08-20 13:51:05

規範說阻止？真的嗎？我相信他們會因爲渲染原因而阻止，而不是因爲任何規範說這樣做！ – Rob 2010-08-20 13:52:29

我應該在正文還是HTML頭部寫腳本？

回答

相關問題