`标签之间。

    
    


    
欢迎来到我的页面
    点我

    

这种方式适合代码量较小、特定页面独有的脚本。它的优点是请求少，但缺点也很明显：代码复用性差，维护困难，并且混合了HTML和JS，不利于内容与行为分离。

2. 外部脚本： 通过src属性链接到一个外部的JavaScript文件。这是更推荐的做法，特别是对于大型项目或需要复用的脚本。

    
    


    
欢迎来到我的页面
    点我

    
    

对应的scripts/main.js文件内容可能如下：

// scripts/main.js
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('myButton');
    if (button) {
        button.addEventListener('click', function() {
            alert('你点击了外部脚本控制的按钮！');
            console.log('外部脚本执行了。');
        });
    }
});

这种方式的好处是显而易见的：代码组织更清晰，易于维护和复用，而且浏览器可以缓存外部JS文件，提高加载速度。

除了src属性，

在这个例子中，lib.js会保证在main.js之前执行。

在我看来，选择defer还是async，关键在于你的脚本是否有序依赖，以及是否需要操作完整的DOM。如果脚本之间有依赖，或者需要等待DOM结构就绪，defer通常是更好的选择。如果脚本是完全独立的，并且越快执行越好，那么async就能提供最大的性能优势。理解这一点，能帮助你做出更明智的性能优化决策。

除了JavaScript，script标签还能做什么？——MIME类型与模块化脚本

虽然我们日常开发中几乎都用

对应的modules/app.js可能长这样：

// modules/utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

// modules/app.js
import { greet } from './utils.js'; // 导入模块

document.addEventListener('DOMContentLoaded', () => {
    const message = greet('World');
    console.log(message);
    document.body.innerHTML += `
${message}
`;
});

与type="module"搭配使用的还有nomodule属性。如果你的用户群体中还有一些老旧浏览器不支持ES模块，你可以提供一个带有nomodule属性的脚本作为回退方案。

支持ES模块的浏览器会加载并执行modern-app.js，同时忽略legacy-app.js。而那些不支持ES模块的浏览器则会忽略modern-app.js，转而加载并执行legacy-app.js。这种方式提供了一种非常优雅的渐进增强策略。

在我看来，type="module"是前端工程化发展的一个重要标志，它让浏览器原生支持了模块化，极大地简化了前端项目的结构和依赖管理。虽然在实际项目中，我们可能依然会使用Webpack、Vite等打包工具来处理模块、优化代码，但理解原生ES模块的工作原理，无疑是理解现代前端开发基石的关键。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。