# JavaScript代碼要放在哪個標簽中
## 引言
在HTML文檔中嵌入JavaScript代碼是前端開發的基礎操作。但許多初學者經常困惑：究竟應該將JavaScript代碼放在哪個HTML標簽里？本文將全面剖析JavaScript代碼的放置位置選擇，分析不同位置的優缺點，并提供最佳實踐建議。
---
## 一、JavaScript代碼的基本放置位置
### 1. `<head>` 標簽內
```html
<!DOCTYPE html>
<html>
<head>
<script>
console.log("腳本在head中執行");
</script>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html>
特點： - 代碼會在頁面渲染前執行 - 可能導致頁面加載延遲（阻塞渲染） - 適合需要提前運行的初始化代碼
<body> 標簽底部（推薦位置）<!DOCTYPE html>
<html>
<body>
<!-- 頁面內容 -->
<script>
console.log("腳本在body末尾執行");
</script>
</body>
</html>
優勢： - 確保DOM完全加載后再執行 - 避免阻塞頁面渲染 - 現代Web開發的標準做法
<script src="app.js"></script>
<script src="app.js" defer></script> <!-- 延遲執行 -->
<script src="app.js" async></script> <!-- 異步加載 -->
對比表：
| 屬性 | 執行時機 | 是否阻塞渲染 |
|---|---|---|
| 無 | 立即執行 | 是 |
| defer | DOM解析完成后順序執行 | 否 |
| async | 下載完成后立即執行 | 否 |
<script type="module" src="main.js"></script>
優勢： - 支持import/export語法 - 自動啟用嚴格模式 - 解決變量污染問題
// 按需加載
button.addEventListener('click', () => {
import('./module.js').then(module => {
module.doSomething();
});
});
<button onclick="handleClick()">點擊</button>
<script>
function handleClick() {
alert("按鈕被點擊");
}
</script>
注意： - 不推薦大量使用（混合了HTML和JS邏輯） - 適合簡單交互原型開發
<svg>
<script>
// 可以操作SVG DOM
console.log(document.querySelector('circle'));
</script>
<circle cx="50" cy="50" r="40"/>
</svg>
<link rel="preload">預加載重要JSdefer示例配置：
<head>
<link rel="preload" href="critical.js" as="script">
<script src="critical.js"></script>
<script src="non-critical.js" defer></script>
</head>
<div id="root"></div>
<script src="bundle.js"></script>
<script language="javascript">兼容性提示： - IE8及以下不支持async/defer - 傳統瀏覽器需要polyfill支持模塊化
JavaScript的放置位置選擇需要綜合考慮： - 腳本的依賴關系 - 對頁面渲染的影響 - 代碼的可維護性
現代Web開發推薦：
? 主要業務邏輯放在外部JS文件
? 使用defer或放在<body>末尾
? 復雜應用采用模塊化方案
通過合理規劃腳本位置，可以顯著提升頁面性能和開發效率。
Q：為什么有時腳本放在head里不工作？
A：因為DOM還未加載，解決方案：
1. 使用DOMContentLoaded事件監聽
2. 將代碼移到body底部
3. 使用defer屬性
Q：多個腳本文件的執行順序如何保證？
A：無屬性時按出現順序執行，使用defer時保持順序，async腳本執行順序不確定
Q：TypeScript應該如何放置？
A：編譯為JS后按常規方式引入，開發時使用<script src="app.ts" type="module">
“`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
