JavaScript程式碼應該放在HTML程式碼哪個位置比較好？ _javascript技巧

在哪裡放置 JavaScript 程式碼？

通常情況下，JavaScript 程式碼是和 HTML 程式碼一起使用的，可以將 JavaScript 程式碼放置在 HTML 文件的任何地方。但放置的地方，會對 JavaScript 程式碼的正常執行會有一定影響，具體如下所述。

放置於之間

將 JavaScript 程式碼放置在 HTML 文件的

標籤之間是一個通常的做法。由於 HTML 文件是由瀏覽器從上到下依序載入的，將 JavaScript 程式碼放置在 標籤之間，可以確保在需要使用腳本之前，它已經被載入了：

複製程式碼 程式碼如下:

....

放置於之間

也有部分情況將 JavaScript 程式碼放置在

之間的。設想如下一種情況：我們有一段 JavaScript 程式碼需要操作 HTML 元素。但由於HTML 文件是由瀏覽器從上到下依序載入的，為避免JavaScript 程式碼操作HTML 元素時，HTML 元素還未載入而報錯（物件不存在），因此需要將這段程式碼寫入HTML 元素後面，範例如下：

複製程式碼 程式碼如下:

但通常情況下，我們操作頁面元素一般都是透過事件來驅動的，所以上面這種情況並不多見。另外我們不建議將 JavaScript 程式碼寫到 之外。

提示

如果HTML 文件宣告為XHTML ，<script></script> 標籤必須在CDATA 部分內聲明，否則XHTML 會將<script></script> 標籤解析為另一個XML 標籤，裡面的JavaScript 程式碼可能不會正常執行。因此，在嚴格的 XHTML 中使用 JavaScript 應該像如下範例一樣聲明：

複製程式碼 程式碼如下:

....

以上兩種將 JavaScript 程式碼寫到 HTML 文件的方式，都是 HTML 文件內部引用 JavaScript 程式碼的方式。除了內部引用，還可以使用外部引用方式。

外部引用 JavaScript 程式碼

將JavaScript 程式碼（不包括<script></script>標籤）單獨形成一個文檔，並以js 後綴命名，如myscript.js ，並在HTML 文檔<script></script> 標籤中使用src 屬性來引用該文件：

複製程式碼 程式碼如下:

....

在使用了外部引用 JavaScript 程式碼之後，其好處顯而易見：
1.避免在 JavaScript 程式碼使用
2.避免使用難看的 CDATA
3.公共的 JavaScript 程式碼可以被重複用於其他 HTML 文檔，也利於 JavaScript 程式碼的統一維護
4.HTML 文件更小，利於搜尋引擎收錄
5.可以壓縮、加密單一 JavaScript 檔案
6.瀏覽器可以快取 JavaScript 文件，減少寬頻使用（當多個頁面同時使用一個 JavaScript 文件的時候，通常只需下載一次）
7.避免使用複雜的 HTML 實體，如可以直接使用 document.write(2>1) 而無需寫作 document.write(2

將 JavaScript 程式碼形成為外部文件，也會增加伺服器的 HTTP 請求負擔，在超高並發請求的環境下，這並不是一個好的策略。另外 在引用外部 js 檔案時，需注意檔案的正確路徑。