除了利用 <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">