1. **内联式嵌入**
内联方式是在 HTML 标签内部直接编写 JavaScript 语句，通常放置于`<script>`标签之中，适用于小段简单的脚本。
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<button onclick="alert('欢迎点击按钮')">点我试试</button>
<script type="text/javascript">
// 在此处可以直接书写JS代码
function helloWorld() {
console.log("Hello World!");
}
helloWorld();
</script>
</body>
</html>
2. **外部引用（推荐）**
对于较复杂的项目或需要复用的函数库等场景下，我们更倾向于把 JS 文件单独存放，并通过 `<script>` 标签进行链接导入。这种方式可以提高代码可维护性和加载效率。
下面是一个例子：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页</title>
<!-- 引入外部js -->
<script src="/path/to/your/script.js" type="text/javascript"></script>
</head>
<body>
<div id="myDiv">等待被修改的内容...</div>
<!-- 可以在此处继续添加其他元素 -->
</body>
</html>
同时，在 `script.js` 中我们可以这样定义我们的JavaScript逻辑:
javascript
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("myDiv").innerText = "内容已由JavaScript更改";
});
3. **异步与延迟载入**
现代Web开发注重性能优化时，常采用async 或 defer属性来控制 script 的执行时机。它们都用于对外部 js 资源的处理上：
- async：表示该资源应尽可能快地下载并在可用后立即执行，但不保证按照指定顺序执行多个带有此特性的 scripts。
html
<script async src="/scripts/myscript.js"></script>
- defer：也允许浏览器尽早开始下载而不会阻塞 DOM 构建，但在整个文档解析完毕且DomContentLoaded事件触发前完成所有defer脚本的按序执行。
html
<script defer src="/scripts/main.js"></script>
总结来说，依据实际需求选择合适的引入方式以及合理利用async、defer特性能够帮助我们在构建高性能web应用过程中更好地整合运用好JavaScript这一强大的工具。