内联式适合简单页面或临时调试，外联式利于维护和性能优化；实际开发常混合使用，现代项目默认采用外联式并配合构建工具。
JavaScript内联式和外联式引入方式各有适用场景，选择的关键在于项目规模、维护需求和性能要求。
内联式（直接写在HTML中）
指把JavaScript代码写在HTML文件的<script>标签里，通常放在<head>或<body>底部。
- 优点：适合简单页面或临时调试，无需额外请求，执行时机明确（如放在<body>末尾可确保DOM加载完成）
- 缺点：无法复用，不利于维护；HTML体积增大；浏览器无法缓存JS逻辑；多人协作时易造成代码混杂；不利于压缩和源码映射（source map）调试
- 注意：避免在<head>中写大量同步脚本，否则会阻塞页面渲染
外联式（通过src属性引入外部文件）
使用<script src="xxx.js"></script>引用独立的.js文件。
- 优点：代码与结构分离，利于团队分工和长期维护；支持浏览器缓存，提升二次访问速度；便于使用构建工具（如Webpack、Vite）做压缩、分包、Tree Shaking等优化
- 缺点：多一次HTTP请求（HTTP/2下影响减小）；若未合理控制加载时机（如没加defer或async），仍可能阻塞渲染
- 建议：首屏关键逻辑可内联，非关键或通用功能（如统计、埋点、工具函数）优先外联；配合defer保证执行顺序，或async用于完全独立的脚本
混合使用的常见策略
实际开发中往往不是非此即彼，而是按需组合。
立即学习“Java免费学习笔记（深入）”；
- HTML中内联少量初始化脚本（如设置全局配置、加载器入口），其余逻辑由外联JS动态组织
- 服务端渲染（SSR）或静态站点生成（SSG）中，常将首屏所需JS内联为<script type="module">，兼顾性能与模块化
- 微前端或插件化架构下，主应用内联加载器，子应用以外联方式按需拉取
现代开发中的倾向性选择
随着工程化普及，外联式已成为默认实践。即使小型项目，也推荐用轻量构建工具（如Vite）管理外联脚本，获得热更新、ES模块支持和自动优化能力。
内联式仅保留在极简场景（如单页静态宣传页）、服务端注入的运行时数据（如JSON配置）或特殊性能兜底方案中。
