一、内联式引入
最直接且原始的方式是在HTML标签内部使用`<script>`元素来插入JavaScript代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 在这里编写 JavaScript 代码
document.write("这是通过内联方式执行的JS代码");
function displayMessage() {
alert('你好！这是一个内联定义并调用的函数');
}
displayMessage();
</script>
</body>
</html>
这种方式的优点在于简单直观，但缺点也明显：不利于维护和复用，并可能造成 HTML 结构混乱，因此对于大型项目并不推荐大量采用此方法。
二、外部文件引用
更为常见的做法则是把JavaScript代码独立保存为.js后缀的文件，然后利用 `<script>` 标签中的 `src` 属性将其链接至HTML文档：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入外部js文件 -->
<script src="./scripts/main.js" type="text/javascript"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
在此例中，“./scripts/main.js”就是需要加载的外部JavaScript资源路径。这种分离式的结构有利于提升代码可读性和模块化管理，方便多个页面共享同一份逻辑或组件；同时也有利于浏览器缓存机制优化性能。
三、异步与延迟加载
随着Web应用程序复杂度的增长，为了提高用户体验和首屏渲染速度，我们还可以对`.js` 文件进行异步或者延时（defer）加载：
1. **异步**：
html
<script async src='./scripts/asyncScript.js'></script>
使用“async”属性表示该脚本将在可用之后立即下载，不会阻塞后续DOM解析过程，一旦下载完成就会被执行，其顺序不能保证，适用于不影响依赖关系的功能性脚本。
2. **延迟(defer)** :
html
<script defer src='./scripts/defferedScript.js'></script>
“defer”属性则表明该脚本会在整个文档解析完毕后再运行(DOMContentLoaded事件触发前)，并且按照它们出现的先后顺序依次执行，适合那些需等待Dom树构建完成后才开始工作的场景如jQuery插件初始化等操作。
总结来说，无论是选择何种方式引入JavaScript，都应视具体应用场景需求灵活调整策略以达到最优效果。正确合理地整合运用这些技巧能够极大地改善项目的组织架构清晰程度及其整体性能表现。