# 怎么引入JavaScript脚本文件 JavaScript作为现代Web开发的三大核心技术之一，其引入方式直接影响页面性能、代码维护性和执行效率。本文将详细介绍6种主流的JavaScript脚本引入方法，并分析其适用场景与最佳实践。 ## 一、基础引入方式 ### 1. 内联脚本（Inline Script） 直接在HTML文件中使用`<script>`标签嵌入代码： ```html <script> console.log('内联脚本执行'); function showAlert() { alert('Hello World!'); } </script> 特点： - 适合小型代码片段或快速测试 - 会阻塞HTML解析（同步执行） - 不利于代码复用和维护
通过src属性引用外部.js文件：
<script src="scripts/main.js"></script> 文件结构建议：
project/ ├── index.html └── scripts/ ├── main.js └── utils/ └── helper.js 优势： - 实现代码分离和复用 - 浏览器可缓存脚本文件 - 便于团队协作开发
<head> <script src="header-script.js"></script> </head> 问题：会阻塞页面渲染，导致白屏时间延长
<body> <!-- 页面内容 --> <script src="footer-script.js"></script> </body> 最佳实践： - 将非关键脚本放在</body>前 - 关键功能脚本可使用async/defer
<script async src="async-script.js"></script> 执行特点： - 下载与HTML解析并行 - 下载完成后立即执行（可能中断HTML解析） - 适合独立第三方脚本（如Google Analytics）
<script defer src="defer-script.js"></script> 执行流程： 1. 异步下载不阻塞HTML解析 2. 在DOMContentLoaded事件前按序执行 3. 适合有依赖关系的脚本
<script type="module" src="module.js"></script> 模块文件示例：
// module.js import { utils } from './utils.js'; export default function() {...} 特性： - 支持import/export语法 - 自动启用严格模式 - 默认defer加载
button.addEventListener('click', async () => { const module = await import('./dialog.js'); module.open(); }); 应用场景： - 按需加载 - 路由级代码分割
document.write('<script src="legacy.js"><\/script>'); 注意： - 已过时方法，会清空现有文档 - 仅限特殊遗留系统使用
const script = document.createElement('script'); script.src = 'dynamic.js'; document.head.appendChild(script); 适用场景： - 条件加载 - A/B测试脚本注入
<link rel="preload" href="critical.js" as="script"> <link rel="preconnect" href="https://cdn.example.com"> // webpack配置 optimization: { splitChunks: { chunks: 'all' } } <script nomodule src="fallback.js"></script> if ('IntersectionObserver' in window) { import('./lazy-load.js'); } else { loadPolyfill(); } | 方式 | 执行顺序 | 是否阻塞 | 适用场景 |
|---|---|---|---|
| 内联脚本 | 立即 | 是 | 小型代码片段 |
| 外部脚本 | 按序 | 是 | 常规脚本 |
| async | 无序 | 部分 | 独立第三方脚本 |
| defer | DOM后顺序 | 否 | 有依赖的脚本 |
| ES Module | 默认defer | 否 | 现代模块化开发 |
正确选择脚本引入方式可使页面加载速度提升30%以上。建议结合Web Vitals指标持续优化脚本加载策略。 “`
（全文约1050字）
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
