JavaScript 放置位置

现代 JavaScript：在哪里以及如何使用

JavaScript 代码可以直接嵌入到 HTML 中，也可以作为外部文件链接。理解包含 JavaScript 的最佳方式对于性能 (performance) 和可维护性 (maintainability) 至关重要。

`<script>` 标签

在 HTML 中，JavaScript 代码放置在 <script> 标签内。你可以直接编写代码（内联脚本 / inline script），或链接到一个外部 JavaScript 文件。

内联脚本示例（历史上常见，但不建议用于大型脚本）：

<!-- 此脚本可能会在 'demo' 元素加载之前运行，导致错误。 -->
<script>
  // 较旧的代码可能会尝试在此处访问 DOM 元素。
  // document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

	注意：`<script>` 标签上的 `type="text/javascript"` 属性已不再需要。在现代 HTML 中，JavaScript 是默认的脚本语言。

JavaScript 模块和异步加载

现代 JavaScript 大量使用模块 (module) 来组织代码。当链接外部脚本时，async 和 defer 属性对于优化页面加载性能至关重要。

<script src="script.js" defer></script>：脚本与 HTML 解析并行下载，并在 HTML 解析器完成后、DOMContentLoaded 事件触发之前执行。带有 defer 的脚本会按照它们在文档中出现的顺序执行。
<script src="script.js" async></script>：脚本并行下载，并在可用时立即执行，可能会中断 HTML 解析。对于多个 async 脚本，执行顺序无法保证。适用于像分析脚本这样独立的脚本。
<script type="module" src="main.js"></script>：将脚本加载为 ES6 模块。模块默认是延迟 (deferred) 执行的。

你将在后续章节中学习更多关于模块、函数和事件的知识。

JavaScript 放置位置：`<head>` vs `<body>`

你可以将 <script> 标签放置在 HTML 文档的 <head> 或 <body> 部分。

	最佳实践：将脚本放置在 `<body>` 标签的末尾，或者在 `<head>` 中使用 `defer` 或 `async` 属性。这可以防止脚本加载/执行阻塞 HTML 渲染，提高感知的页面加载速度。

`<head>` 中的脚本

在 <head> 中放置没有 async 或 defer 的脚本可能会阻塞页面渲染。通常不建议这样做，除非脚本很小且对于初始页面设置至关重要（例如，polyfills 或必须在 body 解析之前运行的配置脚本）。

`<body>` 中的脚本（body 结束位置 - 推荐用于非延迟/异步脚本）

将脚本放置在 </body> 闭合标签之前，可以确保在脚本尝试操作 HTML 结构之前，HTML 结构已经加载完成。这避免了由于脚本试图访问尚未创建的 DOM 元素而导致的错误。

脚本位于 <body> 末尾并使用现代事件处理的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>现代 JavaScript 放置位置</title>
</head>
<body>
    <h1>我的网页</h1>
    <p id="demo">一个段落</p>
    <button id="actionButton" type="button">试试看</button>

    <script>
        function changeParagraph() {
            const demoParagraph = document.getElementById("demo");
            if (demoParagraph) {
                demoParagraph.textContent = "段落已使用现代 JavaScript 更改！";
            }
        }

        const button = document.getElementById("actionButton");
        if (button) {
            button.addEventListener("click", changeParagraph);
        }
    </script>
</body>
</html>

外部 JavaScript

对于大型应用程序，最好将 JavaScript 代码放在外部文件（.js 扩展名）中。

要使用外部脚本，请在 <script> 标签的 src 属性中指定文件路径：

<!-- 在你的 HTML 文件中： -->
<script src="myScript.js" defer></script>
<!-- 或者使用 type="module" 实现现代模块语法 -->
<script type="module" src="app.js"></script>

外部 JavaScript 文件应该只包含 JavaScript 代码，而不包含 <script> 标签。

	外部脚本的行为就像它们的代码直接插入到 `<script>` 标签所在的位置一样，但 `async` 和 `defer` 属性会修改这种行为以获得更好的性能。

外部 JavaScript 的优势

使用外部 JavaScript 文件提供了几个好处：

关注点分离 (Separation of Concerns)：将 HTML 结构和 JavaScript 逻辑分开，提高代码组织性。
可读性和可维护性 (Readability and Maintainability)：使 HTML 和 JavaScript 都更容易阅读、理解和维护。
缓存 (Caching)：浏览器可以缓存外部 JavaScript 文件，加快后续访问或使用相同脚本的不同页面的加载速度。

如需进一步学习，请探索 JavaScript 模块（ES6 模块），以便在大型项目中更好地组织代码。

JavaScript 放置位置

现代 JavaScript：在哪里以及如何使用

<script> 标签