将Javascript插入HTML的方法主要方法是使用script标签。 针对srcipt元素，由两个属性async和defer，分别表示推迟执行脚本和异步执行脚本。

推迟执行脚本

<script defer scr="example.js"></script>
复制代码

defer属性会告诉浏览器应该立即开始下载，但执行应该推迟。 脚本会在DOMContentLoaded事件之前执行。

异步执行脚本

<script async scr="example.js"></script>
复制代码

给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行完再加载其他脚本。

异步脚本保证会在页面的load事件前执行，但可能会在DOMContentLoaded事件之前或之后。

动态加载脚本

除了script标签，还有其他方式可以加载脚本。因为Javascript可以使用DOM API，所以通过向DOM中动态添加script元素同样可以加载指定的脚本。只要创建一个script标签并将其添加到DOM即可。

let script - document.createElement('script');
script.src = 'test.js'
document.head.appendChild(script);
复制代码

当然，在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求。默认情况下，以这种方式创建的script元素是以异步方法加载的，相当于添加了async属性。不过这样做可能会有问题，因为所有浏览器都支持createElement()方法，但不是所有浏览器都支持async属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

let script - document.createElement('script');
script.src = 'test.js';
script.async = false;
document.head.appendChild(script);
复制代码

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

<link rel="prelaod" href="test.js">