將 JavaScript 放在 HTML 文件中的什么位置？
[英]Where to place JavaScript in an HTML file?
問題描述
假設我有一個相當大的 JavaScript 文件，壓縮到大約 100kb 左右。 通過文件，我的意思是它是一個外部文件，它將通過<script src="..."> ，而不是粘貼到 HTML 本身中。
將它放在 HTML 中的最佳位置在哪里？
<html>
<head>
<!-- here? -->
<link rel="stylesheet" href="stylez.css" type="text/css" />
<!-- here? -->
</head>
<body>
<!-- here? -->
<p>All the page content ...</p>
<!-- or here? -->
</body>
</html>
每個選項之間是否有任何功能差異？
12 個解決方案
解決方案1
179 已采納 2008-10-13 04:34:18
雅虎！ 由於瀏覽器下載組件的方式，卓越性能團隊建議將腳本放在頁面底部。
當然，Levi 的評論“就在您需要它之前，不要很快”確實是正確的答案，即“視情況而定”。
解決方案2
76 2008-10-13 04:24:33
最好的地方就是在您需要它之前，而不是更早。
此外，根據您用戶的物理位置，使用像 Amazon 的 S3 服務這樣的服務可能會幫助用戶從物理上比您的服務器更靠近他們的服務器下載它。
您的 js 腳本是像 jQuery 或原型這樣的常用庫嗎？ 如果是這樣，那么有許多公司（例如 Google 和 Yahoo）擁有在分布式網絡上為您提供這些文件的工具。
解決方案3
66 2014-05-05 15:56:16
根據經驗，放置<script>標簽的最佳位置是頁面底部，就在</body>標簽之前。 像這樣的東西：
<html>
<head>
<title>My awesome page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="...">
<link rel="stylesheet" type="text/css" href="...">
<link rel="stylesheet" type="text/css" href="...">
<link rel="stylesheet" type="text/css" href="...">
</head>
<body>
<!-- Content content content -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="..."></script>
</body>
</html>
為什么？
腳本引起的問題是它們會阻止並行下載。 HTTP/1.1 規范建議瀏覽器每個主機名並行下載的組件不超過兩個。 如果您從多個主機名提供圖像，則可以同時進行兩次以上的下載。 然而，在下載腳本時，瀏覽器不會啟動任何其他下載，即使是在不同的主機名上。 更多...
CSS
有點跑題，但是... 將樣式表放在頂部。
在 Yahoo! 研究性能時，我們發現將樣式表移動到文檔 HEAD 會使頁面加載速度更快。 這是因為將樣式表放在 HEAD 中可以讓頁面逐步呈現。 更多...
進一步閱讀
雅虎發布了一個非常酷的指南，其中列出了加速網站的最佳實踐。 絕對值得一讀： https : //developer.yahoo.com/performance/rules.html
解決方案4
4 2008-10-13 07:36:41
使用 100k 的 Javascript，你永遠不應該把它放在文件中。 使用外部腳本 Javascript 文件。 絕對不可能只在一個 HTML 頁面中使用這么多代碼。 您可能會問應該在哪里加載 Javascript 文件，為此您已經收到了滿意的答案。
但我想指出的是，現代瀏覽器通常接受gzip ped Javascript 文件！ 只需將x.js文件 gzip 到x.js.gz ，並在src屬性中指向它。 它不適用於本地文件系統，您需要一個網絡服務器才能使其工作。 但是傳輸字節的節省可能是巨大的。
我已經在 Firefox 3、MSIE 7、Opera 9 和 Google Chrome 中成功測試了它。 它顯然在 Safari 3 中不起作用。
有關更多信息，請參閱此博客文章，以及另一個非常古老的頁面，但它仍然很有用，因為它指出網絡服務器可以檢測瀏覽器是否可以接受 gzip 壓縮的 Javascript。 如果您的服務器端可以動態選擇發送 gzipped 或純文本，您可以使頁面在所有 Web 瀏覽器中可用。
解決方案5
4 2008-10-16 14:44:15
將 javascript 放在頂部看起來更整潔，但從功能上講，最好遵循 HTML。 這樣，您的 javascript 將不會運行並在加載之前嘗試引用 HTML 元素。 這類問題通常只有在您通過實際的 Internet 連接加載頁面時才會變得明顯，尤其是在速度較慢的 Internet 連接上。
您還可以嘗試通過添加來自其他 javascript 代碼的標頭元素來動態加載 javascript，盡管這僅在您沒有一直使用所有代碼時才有意義。
解決方案6
3 2008-10-16 14:22:33
使用cuzillion，您可以使用不同的方法測試不同位置的腳本標簽對頁面加載的影響：內聯、外部、“HTML 標簽”、“document.write”、“JS DOM 元素”、“iframe”和“XHR eval” . 有關差異的解釋，請參閱幫助。 它還可以測試樣式表、圖像和 iframe。
解決方案7
1 2008-10-13 08:33:56
答案取決於您如何使用 javascript 的對象。 正如已經指出的那樣，在頁腳而不是頁眉加載 javascript 文件肯定會提高性能，但應注意所使用的對象的初始化晚於它們在頁腳加載。 另一種方法是加載放置在文件夾中的“js”文件，該文件可用於所有文件。
解決方案8
0 2008-10-13 08:51:21
就像其他人所說的那樣，它很可能應該放在一個外部文件中。 我更喜歡在 <head /> 的末尾包含這樣的文件。 這種方法比機器友好更人性化，但這樣我總是知道 JS 在哪里。 將腳本文件包含在其他任何地方（恕我直言）並不那么可讀。
我真的需要擠出最后的每一個毫秒，那么你可能應該按照雅虎所說的去做。
解決方案9
0 2015-11-18 17:12:28
您的 javascript 鏈接可以位於頭部或 body 標簽的末尾，通過將鏈接放在 body 標簽的末尾確實可以提高性能，但除非性能有問題，否則將它們放在 head 中會更好供人們閱讀，您知道鏈接的位置並且可以更輕松地引用它們。
解決方案10
0 2016-07-26 11:49:56
我會說這取決於你打算用 Javascript 代碼實現什么目標：
- 如果你打算在外部插入你的 JS 腳本，那么最好的地方是在頁面的頭部
- 如果您打算在智能手機上使用頁面，則在頁面底部，就在標記之前。
- 但是，如果您打算組合 HTML 和 JS（例如，動態創建和填充的 HTML 表），那么您必須將它放在您需要的地方。
解決方案11
0 2019-02-26 20:14:07
腳本應該包含在 body 標簽的末尾，因為這樣 HTML 將被瀏覽器解析並在腳本加載之前顯示。
解決方案12
0
問題的答案取決於。 在這種情況下有 2 種情況，您需要根據您的適當情況做出選擇。
場景 1 - 關鍵腳本/必須需要的腳本
如果您使用的腳本對加載網站很重要，建議將其放置在 HTML 文檔的頂部，即<head> 。 一些示例包括 - 應用程序代碼、引導程序、字體等。
場景 2 - 不太重要的/分析腳本
還使用了不影響網站視圖的腳本。 建議在所有重要段加載后加載此類腳本。 答案將是文檔的底部，即結束標記之前<body>底部。 一些示例包括 - Google 分析、hotjar 等。
獎勵 - 異步/延遲
您還可以告訴瀏覽器腳本加載可以與其他人同時完成，並且可以根據瀏覽器的選擇在腳本代碼中使用 defer / async 參數進行加載。
例如。 <script async src="script.js"></script>
放置JavaScript函數的位置：<head>？ <BODY>？或者，在</ html>之后？
[英]Where to place JavaScript functions: <head>? <body>? or, after </html>?
xmlhttprequest javascript - 我在哪里放置我的 json 文件
[英]xmlhttprequest javascript - where do i place my json file
將JavaScript文件與Rails中的特定視圖文件夾相關聯的位置在哪里？
[英]Where to place the javascript file to relate it with a particular view folder in Rails?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
放置我的 JavaScript 文件的最佳位置在哪里？
javascript文件在codeigniter目錄中的哪里放置？
如何將 Javascript 放在與 HTML 不同的文件中
將javascript放在外部文件中的html5中
放置JavaScript函數的位置：<head>？ <BODY>？或者，在</ html>之后？
xmlhttprequest javascript - 我在哪里放置我的 json 文件
將JavaScript文件與Rails中的特定視圖文件夾相關聯的位置在哪里？
我應將我的Javascript文件放在Flex 3項目的哪里？
將 html 放在 javascript 字符串中？
如何使用 JavaScript 在 HTML 中放置 SVG 圖像文件
相關標簽