在HTML中嵌入JavaScript有三种主要方法：使用`
标签包裹内部代码，通过src属性引入外部.js文件，或在HTML事件属性（如onclick`）中直接写入简短脚本。在HTML中嵌入JavaScript（JS）是实现网页交互性的核心技术，以下是详细方法及最佳实践，符合现代Web标准：
内联嵌入（直接写在HTML标签内）
<button onclick="alert('点击生效')">点我</button>
<a href="javascript:void(0)" onmouseover="this.style.color='red'">悬停变色</a>
适用场景：简单事件处理
缺点：难以维护，不推荐大规模使用
内部脚本（使用<script>
<body>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('demo').innerText = "页面已加载";
});
</script>
<div id="demo"></div>
</body>
最佳位置：
<body>末尾（加速渲染） <head>中需配合DOMContentLoaded事件
外部脚本（最推荐方式）
<head>
<!-- 基础加载 -->
<script src="scripts/main.js"></script>
<!-- 异步加载 -->
<script async src="analytics.js"></script>
<!-- 延迟加载 -->
<script defer src="lazy-loader.js"></script>
</head>
加载方式对比：
| 属性 | 执行时机 | 适用场景 |
|--------|------------------------|-----------------------|
| 无属性 | 立即暂停HTML解析 | 需优先执行的脚本 |
| async| 下载完成后立即执行 | 独立脚本（如分析工具） |
| defer| HTML解析完成后执行 | 依赖DOM的脚本 |
模块化脚本（ES6+）
<script type="module" src="app.mjs"></script>
<!-- 或内联模块 -->
<script type="module">
import { init } from './utils.mjs';
init();
</script>
优势：
- 支持
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>
-
现代替代方案：
<!-- HTTP/2服务器推送 -->
<link rel="preload" href="bundle.js" as="script">
<!-- Web Workers复杂计算 -->
<script>
const worker = new Worker('cpu-task.js');
</script>
-
兼容性处理：
<!-- 旧浏览器降级方案 -->
<script>
window.Modernizr || document.write('<script src="legacy-polyfill.js">x3C/script>')
</script>
权威引用
专业提示：根据HTTP Archive统计，75%的网站使用外部JS文件，平均每个页面包含22个脚本，建议通过Tree Shaking和代码分割将脚本体积控制在170KB以内以优化加载速度。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/27710.html
<body>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('demo').innerText = "页面已加载";
});
</script>
<div id="demo"></div>
</body>
最佳位置：
<body>末尾（加速渲染）<head>中需配合DOMContentLoaded事件
外部脚本（最推荐方式）
<head> <!-- 基础加载 --> <script src="scripts/main.js"></script> <!-- 异步加载 --> <script async src="analytics.js"></script> <!-- 延迟加载 --> <script defer src="lazy-loader.js"></script> </head>
加载方式对比：
| 属性 | 执行时机 | 适用场景 |
|--------|------------------------|-----------------------|
| 无属性 | 立即暂停HTML解析 | 需优先执行的脚本 |
| async| 下载完成后立即执行 | 独立脚本（如分析工具） |
| defer| HTML解析完成后执行 | 依赖DOM的脚本 |
模块化脚本（ES6+）
<script type="module" src="app.mjs"></script>
<!-- 或内联模块 -->
<script type="module">
import { init } from './utils.mjs';
init();
</script>
优势：
- 支持
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>
- 避免
-
现代替代方案：
<!-- HTTP/2服务器推送 --> <link rel="preload" href="bundle.js" as="script"> <!-- Web Workers复杂计算 --> <script> const worker = new Worker('cpu-task.js'); </script> -
兼容性处理：
<!-- 旧浏览器降级方案 --> <script> window.Modernizr || document.write('<script src="legacy-polyfill.js">x3C/script>') </script>
权威引用
专业提示：根据HTTP Archive统计，75%的网站使用外部JS文件，平均每个页面包含22个脚本，建议通过Tree Shaking和代码分割将脚本体积控制在170KB以内以优化加载速度。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/27710.html
