放置＜script＞标记的最佳位置是在关闭＜/body＞标记之前，因此下载和执行它不会阻止浏览器解析文档中的HTML，

此外，从外部加载JavaScript文件也有其自身的优点，比如它将被浏览器缓存，可以加快页面加载时间，它将HTML和JavaScript代码分开，有助于更好地管理代码库。

但现代浏览器还支持其他一些最佳方式，如异步和延迟加载外部JavaScript文件。

异步和延迟

通常HTML页面的执行是逐行开始的。当遇到外部JavaScript＜script＞元素时，HTML解析将停止，直到下载JavaScript并准备好执行。可以使用defer和async属性更改正常的页面执行。

推迟

当使用defer属性时，JavaScript将与HTML解析并行下载，但只有在完成完整的HTML解析后才能执行。

<script src="/local-js-path/myScript.js" defer></script>

异步

当使用async属性时，一旦遇到脚本，就会立即下载JavaScript，在下载之后，它将与HTML解析一起异步（并行）执行。

<script src="/local-js-path/myScript.js" async></script>

何时使用哪些属性

如果您的脚本独立于其他脚本并且是模块化的，请使用异步。如果使用异步加载script1和script2，则两者都将运行与HTML解析并行，一旦下载并且可用。如果您的脚本依赖于另一个脚本，则对这两个脚本都使用defer：当script1和script2以延迟的顺序加载时，然后，script2将在script1完全执行后执行。如果script2依赖于script1，则必须执行此操作。如果您的脚本足够小并且依赖于另一个脚本然后使用不带属性的脚本，并将其置于所有异步脚本之上。

参考：外部JavaScript JS文件–优点、缺点、语法、属性

如果您仍然非常关心Internet Explorer版本10之前的支持和性能，那么最好始终将脚本标记设置为HTML正文的最后一个标记。这样，您就可以确定DOM的其余部分已经加载，并且不会阻塞和渲染。如果您不太关心版本10之前的Internet Explorer，您可能希望将脚本放在文档的开头，并使用defer来确保它们仅在加载DOM后运行（<script type=“text/javascript”src=“path/to/script1.js”defer></script>）。如果您仍然希望代码在版本10之前的Internet Explorer中运行，请不要忘记将代码包装在窗口中！

非阻塞脚本标记可以放置在任何位置：

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>

异步脚本一旦可用，将立即异步执行当文档完成解析时执行defer脚本如果不支持异步，异步延迟脚本将返回到延迟行为

这样的脚本将在文档准备就绪后异步执行，这意味着您无法执行此操作：

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

或者这个：

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

或者这个：

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

或者这个：

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

尽管如此，异步脚本提供了以下优点：

并行下载资源：浏览器可以并行下载样式表、图像和其他脚本，而无需等待脚本下载和执行。源顺序独立性：您可以将脚本放在头部或身体内部，而不必担心阻塞（如果您使用CMS，则很有用）。尽管如此，执行顺序仍然很重要。

使用支持回调的外部脚本可以避免执行顺序问题。许多第三方JavaScript API现在支持非阻塞执行。下面是一个异步加载GoogleMapsAPI的示例。

最好将其放在</body>结束标记之前。

为什么？根据官方文件：https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics#a_hello_world!_实例

注：说明（上面）放置元素的原因HTML文件的底部附近是浏览器在在文件中显示的顺序。如果JavaScript首先加载，并且它应该会影响HTML尚未加载，可能会出现问题。放置JavaScript靠近HTML页面底部是一种适应这种情况的方法附属国。要了解有关替代方法的更多信息，请参见脚本加载策略。

编写JavaScript代码的最佳位置是在＜/body＞标记之后或之前的文档末尾，以先加载文档，然后执行JavaScript代码。

<script> ... your code here ... </script>
</body>

如果您在jQuery中编写，以下内容可以在头文档中，并且将在文档加载后执行：

<script>
    $(document).ready(function(){
        // Your code here...
    });
</script>

在结尾包含脚本主要用于首先显示网页内容/样式的地方。

在头中包含脚本可以很早加载脚本，并且可以在加载整个网页之前使用。

如果最后输入了脚本，则只有在加载了整个样式和设计之后才进行验证，这对于快速响应的网站来说是不受欢迎的。