2.1.4动态加载脚本

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

let script = document.createElement('script');
script.src  = 'gibberish.js';
document.head.appendChild(script);

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

let script = document.createElement('script');
script.src  = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

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

 <link rel="preload" href="gibberish.js">