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

HTML怎样嵌入JavaScript？

admin
前端开发
2025-06-17
5

在HTML中嵌入JavaScript有三种主要方法：使用` 标签包裹内部代码，通过src 属性引入外部.js文件，或在HTML事件属性（如onclick`）中直接写入简短脚本。

在HTML中嵌入JavaScript（JS）是实现网页交互性的核心技术，以下是详细方法及最佳实践，符合现代Web标准：

内联嵌入（直接写在HTML标签内）

适用场景：简单事件处理

缺点：难以维护，不推荐大规模使用

内部脚本（使用<script>

<body> <script> document.addEventListener('DOMContentLoaded', () => { document.getElementById('demo').innerText = "页面已加载"; }); </script> <div id="demo"></div> </body>
最佳位置：

<body>末尾（加速渲染）

<head>中需配合DOMContentLoaded事件

外部脚本（最推荐方式）

加载方式对比：

| 属性 | 执行时机 | 适用场景 |

|--------|------------------------|-----------------------|

| 无属性 | 立即暂停HTML解析 | 需优先执行的脚本 |

| async| 下载完成后立即执行 | 独立脚本（如分析工具） |

| defer| HTML解析完成后执行 | 依赖DOM的脚本 |

模块化脚本（ES6+）

优势：

支持import/export语法
自动启用严格模式
解决变量污染问题

动态加载

// 按需加载脚本 const loadScript = (url) => { const script = document.createElement('script'); script.src = url; document.body.appendChild(script); }; // 使用示例 loadScript('https://cdn.example.com/library.js');

最佳实践与注意事项

性能优化：
- 关键脚本内联,非关键脚本异步/延迟加载
- 使用preload预加载重要资源： <link rel="preload" href="critical.js" as="script">
安全规范：
- 避免document.write()（会阻塞渲染）
- 内联脚本需转义特殊字符：</script>代替</script>
- 现代替代方案：
   <link rel="preload" href="bundle.js" as="script">  <script> const worker = new Worker('cpu-task.js'); </script>
- 兼容性处理：
  
   <script> window.Modernizr || document.write('<script src="legacy-polyfill.js">x3C/script>') </script>