当前位置：首页 > 前端开发 > 正文

如何在HTML中添加JS？

admin
前端开发
2025-06-21
2390

在HTML中插入JavaScript可通过` 标签实现，支持内联代码（直接写在标签内）或外部引入（通过src

属性链接.js文件），内联脚本常用于简单逻辑，外部文件更利于代码复用和维护，通常放置在

`末尾避免阻塞页面渲染。

在现代网页开发中,JavaScript 是实现交互功能的核心技术，下面详细介绍在 HTML 中编写 JavaScript 的四种主流方法，每种方法均附代码示例和适用场景：

基础嵌入方法

内联脚本 (Inline Script)
直接在 HTML 元素的属性中编写 JS 代码：
```
<button onclick="alert('按钮被点击！')">点击我</button>
```
适用场景：简单事件处理（如点击、鼠标悬停）
缺点：代码与 HTML 混杂，难以维护

内部脚本 (Internal Script)
使用 <script> 标签包裹 JS 代码：

<body>
  <script>
    function greet() {
      const name = prompt("请输入名字");
      document.getElementById("output").textContent = `你好，${name}！`;
    }
  </script>
  <button onclick="greet()">打招呼</button>
  <div id="output"></div>
</body>

优势：代码结构清晰
最佳位置：</body> 结束前（避免阻塞页面渲染）

外部脚本 (External Script)（推荐）
通过 src 属性引入独立 .js 文件：
```

<script src="scripts/main.js" defer></script>
```
main.js 文件内容：
```
document.addEventListener("DOMContentLoaded", () => {
  console.log("页面加载完成！");
  // 更多初始化代码...
});
```
核心优势：
- 代码复用（多页面共享同一脚本）
- 浏览器缓存优化
- 使用 defer 属性确保 HTML 解析完成后执行（或 async 异步加载）

关键位置决策

脚本位置	影响	使用建议
`<head>` 内	阻塞渲染，可能导致白屏	避免（除非必需）
`<body>` 中部	中断 HTML 解析	不推荐
`</body>` 前	最佳默认选择	90% 场景适用
`defer/async`	异步加载，不阻塞渲染	外部脚本首选

进阶加载策略

模块化开发 (ES Modules)
现代浏览器支持的模块系统：
```
<script type="module">
  import { initApp } from './modules/app.js';
  initApp(); // 调用导入的函数
</script>
```
优势：依赖管理、代码分割、按需加载

动态加载
运行时按需加载脚本：

document.getElementById('loadBtn').addEventListener('click', () => {
  const script = document.createElement('script');
  script.src = 'dynamic-component.js';
  document.body.appendChild(script);
});

安全与性能实践

安全防护
- 避免使用 innerHTML 插入未过滤的用户输入
- 启用 CSP (Content Security Policy) 头：
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
```
性能优化
- 最小化脚本文件大小（使用 Webpack/Vite 打包压缩）
- 非核心脚本添加 async 属性
- 使用预加载提示：
```
<link rel="preload" href="critical.js" as="script">
```