# HTML中script如何使用
`<script>` 標簽是HTML中用于嵌入或引用JavaScript代碼的核心元素。本文將詳細介紹其使用方法、屬性配置以及最佳實踐。
## 一、基本用法
### 1. 內聯腳本
直接在HTML文件中編寫JavaScript代碼：
```html
<script>
alert('Hello, World!');
</script>
通過src屬性引用外部JS文件：
<script src="script.js"></script>
| 屬性 | 作用 | 示例 |
|---|---|---|
src |
指定外部腳本URL | <script src="app.js"> |
async |
異步加載（下載不阻塞HTML解析） | <script async> |
defer |
延遲執行（HTML解析后按序執行） | <script defer> |
type |
指定腳本類型 | <script type="module"> |
<script src="blocking.js"></script>
<script async src="analytics.js"></script>
<script defer src="vendor.js"></script>
<script defer src="app.js"></script>
使用ES6模塊系統：
<script type="module">
import { utils } from './utils.js';
utils.log('Module loaded');
</script>
特點：
- 自動啟用嚴格模式
- 支持import/export
- 默認具有defer特性
位置建議：
</body>前<head>+defer性能優化：
<!-- 預加載重要資源 -->
<link rel="preload" href="critical.js" as="script">
兼容性處理：
<script nomodule src="legacy.js"></script>
動態加載：
const script = document.createElement('script');
script.src = 'dynamic.js';
document.body.appendChild(script);
document.ready？// 確保DOM完全加載
document.addEventListener('DOMContentLoaded', () => {
// 操作DOM的代碼
});
// 使用IIFE
(function() {
const privateVar = 'hidden';
})();
Access-Control-Allow-Origin: *
通過指定類型：
<script type="module">
// @ts-check
/** @type {HTMLCanvasElement} */
const canvas = document.getElementById('myCanvas');
</script>
合理使用<script>標簽對頁面性能至關重要?，F代Web開發推薦：
- 優先使用type="module"
- 非關鍵腳本采用async
- 使用構建工具打包優化
注意：實際開發中應考慮使用Webpack/Rollup等構建工具管理腳本依賴。
”`
（注：此為精簡版，完整1000字版本需擴展每個章節的說明和示例代碼，此處因篇幅限制有所壓縮）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
