点击我
点击我 ``` **2、内联脚本** ```html ``` **3、外部脚本** ```html ``` ES6 模块化引入，此方式必须要有一个服务器环境！比如：本地安装一个 `nginx`。 ```html ``` ### 内联脚本应用场景 内联脚本一般多用于页面初始化、临时代码调试、首屏渲染必需的初始化逻辑等场景，比如三方插件初始化： ```html ``` ### 外部脚本应用场景 外部脚本适合复杂、复用性高的场景，是现代 Web 开发的主流选择，使用外部脚本可以降低 HTML 代码的复杂度，有利于项目的维护。 ```html ``` **模块化引入方式：** ```html ``` index.js: ```js import { a } from './utils.js'; import { b } from './common.js'; a(); b(); document.querySelect('#button').addEventListener("click", async () => { // 按需加载模块 const module = await import("./test-module.js"); // test-module.js 中导出 run 方法 module.run(); console.log('Hello World!'); }); ``` ## script 标签属性 script 标签除了常见的 type 和 src 外，还有两个控制脚本异步加载的属性，分别为 async 和 defer，区别如下： ### 1、无 async/defer ```plaintext HTML 解析 → 遇到 ``` 应用场景：脚本完全独立，不依赖其他脚本或 DOM，比如：统计代码、广告代码等。 ### 3、defer ```plaintext HTML 解析（并行下载脚本） → HTML 解析完成 → 按顺序执行所有 `defer` 脚本 ``` 多个 defer 脚本严格按文档顺序执行，无论下载速度。所有 defer 脚本执行完毕后，才会触发 DOMContentLoaded 事件。 ```html ``` 应用场景：脚本需要访问完整的 DOM 或依赖其他脚本，比如：页面初始化逻辑。 ## script 标签位置 1. 首先要明白，存放在 head 中的 script 标签，会阻塞页面加载，如果这个文件超大，那么页面白屏时间就会很长。 2. 如果是内联脚本，放在哪儿其实影响不大，主要看其内容中有没有耗时的操作。 3. 如果您的脚本需要尽早执行，那么建议放在 head 中。比如：vconsole调试工具，尽早加载有利于捕获代码错误。 4. 如果您的脚本需要访问完整的 DOM，那么建议放在 body 的最后，这样可以确保 DOM 已解析完成。 5. 虽然可以使用 defer 控制脚本延迟加载，但某些兼容原因，还是建议 JS 脚本后置兼容旧版本浏览器。 ## 写在最后 JS 代码应该首先考虑放在外部文件中，HTML 结构应该永远保持简洁。 除非您真的有需求，才建议将 JS 代码放在 head 中，否则 JS 代码应该永远放在 `` 结束标签之前。