HTML中嵌入JS常用标签，位置影响性能

这种方式适用于页面特有的少量脚本，无需额外文件请求。但如果脚本代码量大，HTML文件会变得很臃肿，不利于代码复用，也影响HTML的可读性。我有时会在一些快速原型开发或者确实只有一两行、且只针对当前页面的初始化脚本时用它，但大规模项目肯定不会这么搞。

3. 外部JavaScript (External JavaScript)

这是目前最主流、也最推荐的做法。你把所有的JavaScript代码写在一个独立的.js文件中，然后在HTML中通过

这种方式把HTML结构和JavaScript行为彻底分离，代码清晰，易于维护和管理。而且，浏览器可以缓存这些外部JS文件，当用户再次访问你的网站时，如果文件没有更新，浏览器会直接从缓存中读取，大大提升加载速度。这一点非常关键，对于用户体验来说，快就是好。

script标签放在head里好还是body里好？

这是一个老生常谈的问题，但其背后涉及到浏览器渲染机制和用户体验的深层次考量。我的经验告诉我，这没有绝对的“好”与“坏”，只有“更适合”的场景。

放在里： 当你把

如果script2.js依赖于script1.js中的某个变量或函数，那么defer就能保证script1.js会先于script2.js执行。这就像是告诉浏览器：“这个脚本很重要，但你先别急着执行，等HTML都搞定再说，而且我会排队，不插队。”

• 适用场景： 当你的脚本依赖于DOM，或者脚本之间存在执行顺序的依赖关系时，defer是一个非常好的选择。比如，你有一个jQuery库文件，然后另一个脚本文件需要使用jQuery，这时就可以给它们都加上defer。

async属性： 当你在

这意味着，如果你的HTML中有多个async脚本，它们的执行顺序是不可预测的，哪个先下载完哪个就先执行。这就像是告诉浏览器：“我下载完了就跑，不管不顾，谁也别想拦我。”

• 适用场景： async非常适合那些独立性强、不依赖DOM、也不依赖其他脚本的脚本。例如，统计代码（Google Analytics）、广告脚本或者一些独立的第三方组件。因为它们不需要等待其他资源，可以尽快加载并执行，对页面渲染的影响最小。

我的看法： 理解defer和async的关键在于它们对“阻塞”和“顺序”的处理。async是完全非阻塞、非有序的，而defer是非阻塞但有序的。在实际项目中，我会根据脚本的特性来选择：如果脚本是核心交互逻辑，且需要操作DOM或有依赖关系，我会倾向于将它放在末尾（不加defer/async，让它在DOM可用后执行），或者使用defer。如果脚本是辅助性的，比如埋点、广告等，我会毫不犹豫地使用async。

什么时候应该使用外部JavaScript文件？

在现代Web开发实践中，几乎所有非简单的页面交互都应该使用外部JavaScript文件。这不是一个建议，而是一个规范。将JavaScript代码放在独立的.js文件中，并从HTML中引用，带来了多方面的好处，这些好处远超内联或内部脚本所能提供的便利。

1. 代码复用与维护性： 想象一下，如果你有几十个页面，每个页面都需要一个导航栏的下拉菜单功能，或者一个通用的表单验证逻辑。如果这些代码都写在每个HTML文件里，那么一旦功能需要修改，你就要改几十个文件。这简直是维护的噩梦。而如果这些代码都在一个外部.js文件里，你只需要修改一个文件，所有引用它的页面都会同步更新。这大大提升了代码的复用性和可维护性。

2. 浏览器缓存机制： 这是外部JS文件一个巨大的性能优势。当用户第一次访问你的网站时，浏览器会下载这些外部.js文件并将其缓存起来。当用户再次访问你的网站（或者访问网站的其他页面，只要引用了同一个JS文件），浏览器会直接从本地缓存中读取这些文件，而无需再次从服务器下载。这大大减少了HTTP请求次数和数据传输量，从而显著加快了页面加载速度，提升了用户体验。

3. 分离关注点 (Separation of Concerns)： 这是Web开发的一个基本原则。HTML负责页面结构，CSS负责页面样式，JavaScript负责页面行为。将它们各自放在独立的文件中，能够让代码结构更清晰，更易于阅读和理解。开发者可以专注于某个层面的开发，降低了代码的耦合度，也使得团队协作更加高效。当你需要调试样式问题时，你不会被大量的JavaScript代码干扰；当你需要修改交互逻辑时，你也不必在HTML标签的海洋中寻找。

4. 团队协作效率： 在大型项目中，通常会有多个开发者协同工作。如果JavaScript代码都内联在HTML中，很容易出现冲突和代码覆盖。而使用外部JS文件，不同的开发者可以同时在不同的JS文件上工作，互不干扰，通过版本控制系统（如Git）进行管理，大大提高了开发效率。

5. 代码量与可读性： 当JavaScript代码量较大时，将其放在外部文件可以避免HTML文件过于臃肿，提高HTML的可读性。一个整洁的HTML文件，更容易让人理解其结构。

总的来说，外部JavaScript文件是构建现代、高性能、易维护Web应用的基石。内联和内部脚本，我通常只会在一些非常特殊、代码量极小且不具备复用价值的场景下才会使用，比如一个简单的事件绑定或者一个临时的调试脚本。但对于任何稍微复杂一点的交互逻辑，或者任何可能在多个页面复用的功能，外部JS文件都是毫无疑问的最佳选择。

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