JavaScript是否必須位於head標籤中？

我相信javascript可以在任何地方（幾乎），但我幾乎總是看到它在<head></head>之間。我正在使用jquery，並想知道它是否必須出於某種原因存在於head標籤中，或者如果我將它移動，將會破壞某些東西。謝謝。JavaScript是否必須位於head標籤中？

編輯：爲什麼它幾乎總是在頭標籤？

來源

2009-07-31 johnny

就像一個筆記一樣，如果您使用FireBug中的`

當瀏覽器讀取腳本標記後，所有事情都會停止，直到它處理完畢。因此，如果您儘可能將腳本標記向下移動，則頁面會更快地渲染 - 理想情況下，就在最後一個標記之前。顯然總載入時間將是相同的。

你將不得不確保你實際上沒有調用任何jQuery函數，直到包含jQuery。

來源

2009-07-31 15:46:25 Draemon

基本上，瀏覽器停止呈現頁面，直到.js文件被完全下載並處理。由於它們在HTML到達時逐漸渲染頁面，因此引用後面的.js文件，則用戶體驗會更好。

所以訣竅是在head中只包含絕對重要的腳本，並在頁面尾部加載剩餘的腳本。

來源

2009-07-31 15:46:37

它可以去head或body標籤。請記住，只要讀取它就會執行，而不一定在文檔完成加載時執行。看看here。

來源

2009-07-31 15:46:42 rmarimon

因爲您不希望JavaScript與HTML混合 - 具有行爲的內容。最好你想在一個單獨的文件。
讓JS在其他地方有優點和缺點 - 例如它會在不同的時間執行，並且您可以從位於正文中的javascript寫入文檔。

來源

2009-07-31 15:46:46 EFraim

不，它可以在任何地方。事實上，把它放在文檔的底部是個好主意。有關解釋原因，請參閱http://developer.yahoo.com/performance/rules.html#js_bottom。

來源

2009-07-31 15:46:56 Nate

實際上，出於性能原因，您幾乎總是希望將腳本標籤放在頁面的底部。爲什麼？您希望首先加載頁面結構和CSS，以便用戶立即看到頁面。然後你想要所有你的行爲驅動代碼加載最後。 YSlow是一個很好的Firefox擴展，它會向你顯示性能等級。它爲你評分的項目之一是你是否在底部而不是頂部有javascript。

來源

2009-07-31 15:47:07

第SCRIPT不僅分類爲head.misc element，而且還分爲special element，因此在允許的任何地方允許inline elements。剛剛結束標記，使得JavaScript是加載之前整個文檔進行解析之前

<p>foo <script>document.write("bar")</script></p>

事實上，some recommend to put SCRIPT elements at the end of the BODY：所以，你可以把一個SCRIPT無論內聯元素是允許的。這是爲了防止JavaScript阻止並行下載。

來源

2009-07-31 15:49:08 Gumbo

根據用戶的瀏覽器以及您將Javascript放置在頁面中的哪個位置，只需注意可能對延遲造成的不良影響 - 請參閱Steve Souders必須說的所有內容，包括他的視頻斯坦福大學的講座，他的工作成果留下了，例如here（儘可能將腳本放在頁面的底部等等）。

來源

2009-07-31 15:49:37

在某些情況下，如果腳本位於錯誤位置，腳本可能無法正常工作。某些JavaScript需要在特定的HTML元素之後執行，其他JavaScript需要恰好在您希望腳本輸出顯示的位置，其他JavaScript應位於文檔的頭部。這實際上取決於如何編寫代碼。如果你不知道，你應該window.load或domready中執行代碼：http://www.javascriptkit.com/dhtmltutors/domready.shtml

來源

2009-07-31 15:49:54 AyexeM

這就是爲什麼JavaScript是在這樣一個爛攤子，爲什麼舊的StackOverflow職位是開發者最可怕的噩夢。現在JS變化如此之快，每週都會有一個新的框架出現，每個人都被它的倡導者稱爲蜜蜂跪下。

Gumbo說得對，腳本標記可以在內聯元素的任何位置引用，但加載外部JS文件或在代碼中包含JS代碼的選擇是針對每種情況分別作出的決定。是的，瀏覽器會在分析時停止加載JS，因此您需要考慮這將如何影響頁面加載速度和功能。目前或一年前，2015年中（考慮到popualar的答案是在2009年7月，大多數開發者不會閱讀這些內容，因爲他們看到答案1並繼續前進!!!）是給定移動頁面加載速度的優先級要求對移動/蜂窩電話桅杆提出兩個請求限制，在3G下給你一個28K（2×14kb（是））有效載荷，你需要考慮（以Google的名字命名）28k的「油漆到屏幕」這應該爲用戶提供足夠的頁面內容/交互性，以確保他們在正確的頁面或正確的軌道上，在那28k。所以一個JQuery的縮小版本目前是87.6lkb，只是不會削減芥末！

這就是爲什麼大多數移動頁面加載目前在加載任何東西前幾秒鐘，這就是4G！不要這樣做。在您的JQuery文件加載之前，頁面速度爲王並且用戶點擊後退按鈕。在3G +下，一個28k的有效載荷將在< 1秒內加載，所以沒有理由說明你的網頁在那段時間內沒有開始加載。當你下次打你的手機上的鏈接時，看着小酒吧坐下，等待它通過下一頁上的所有標籤！

因此，構建你的頁面不要放在SO所說的7年前的帖子上（它沒有錯僅僅是過時的），但是每一段代碼都是必需的，並且確保用戶可以使用他最重要的方面在嘗試加載6個JS框架以實現智能平行滾動和廣泛的數據綁定爲您的聯繫頁面之前的頁面。

順便說一下，Google要求您將JS推到最低處，因爲它們提供了Google分析代碼，而且這需要成爲最後一次加載。

想想你的代碼！

來源

2016-11-10 21:31:07 Jools

相關問題