上一篇
html标签引用js
HTML引用JS可通过标签实现，分内联、内部、外部三种方式，内联直接写入标签内；内部将代码置于或的块中；外部通过src属性引入.js文件，推荐将放在前以优化加载速度，并注意正确闭合标签
HTML引用JavaScript的常见方式
内联脚本（直接在HTML中编写）
将JavaScript代码直接放在<script>标签内，通常用于少量、页面特定的逻辑。
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Hello')">点击我</button>
<script>
function showMessage() {
alert('内联脚本执行');
}
</script>
</body>
</html>内部脚本（在<head>或<body>中定义）
将JavaScript代码集中写在<script>标签内,适用于页面级逻辑。
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('页面加载完成');
});
</script>
</head>
<body>
<h1>内部脚本示例</h1>
</body>
</html>外部脚本（链接外部JS文件）
将JavaScript代码抽离到独立文件，通过src属性引入,适合多页面复用。
<!DOCTYPE html> <html> <head> <script src="main.js"></script> </head> <body> <h1>外部脚本示例</h1> </body> </html>
外部文件（main.js）
document.addEventListener('DOMContentLoaded', () => {
console.log('外部脚本加载');
});不同引用方式的对比
| 特性 | 内联脚本 | 内部脚本 | 外部脚本 |
|---|---|---|---|
| 代码复用性 | 低 | 中 | 高 |
| 维护难度 | 高（分散） | 中（集中但未抽离） | 低（独立文件） |
| 加载性能 | 随HTML解析执行 | 随HTML解析执行 | 可异步加载（需async/defer） |
| 适用场景 | 临时交互逻辑 | 页面级功能 | 全局功能/多页面复用 |
async与defer的区别
| 属性 | 行为描述 | 适用场景 |
|---|---|---|
async | 异步加载，不保证执行顺序，可能破坏依赖关系 | 无依赖的独立脚本（如第三方库） |
defer | 异步加载，但保证DOM解析后执行，保留顺序 | 需要按顺序执行的脚本（如主逻辑） |
示例：
<!-async --> <script src="utils.js" async></script> <!-defer --> <script src="main.js" defer></script>
相关问题与解答
问题1：async和defer对脚本加载顺序有什么影响？
解答：
async：脚本异步加载，不阻塞HTML解析，但执行顺序不确定（谁先下载完谁先执行）。defer：脚本异步加载，但保证在所有同步脚本和DOM解析完成后按顺序执行。
建议：优先使用defer保证逻辑顺序，除非脚本无依赖（如第三方广告代码）。
问题2：外部脚本放在<head>还是<body>末尾更好？
解答：
- 放在
<head>：需配合defer或async，避免阻塞DOM渲染。 - 放在
<body>末尾：无需defer，脚本会在DOM加载完成后执行，但可能延长白屏时间。
最佳实践：将关键脚本放在<body>末尾，非关键脚本（如分析工具）使用
