开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 N 天，点击查看活动详情
动态加载脚本
如何操作
除了使用HTML中的<script>标签，还有其他方式可以加载脚本——DOM操作。
我们可以使用document.createElement接口生成一个不处于现有DOM树中的节点。此时，我们可以像操作其他DOM元素一样对该节点进行各种节点操作。当然，他没有父节点，你要硬访问它的父节点的话，那他只能摆臭脸给你了。不能揭人伤疤不是。
若不进行操作，那么此时创建出来的节点是默认不带任何属性的空<script>节点【此处以当前主流浏览器Edge最新版110.0.1587.49为准】。此时浏览器不会解析该元素，所以对应的资源并不会被加载。当然也不会被执行。
在进行操作后，可以将该节点添加到DOM树中，此时，浏览器才会根据运行机制结合script标签以及文档内的内容，对该script标签引用的文件或内嵌的代码进行加载与执行。
如何优化
我们知道浏览器有一个预加载器是用来预加载资源的。
以DOM方式创建的<script>节点在进行加载的时候，是不经过浏览器预加载器的。这就会严重影响节点在获取资源时的优先级，这种情况可能会严重影响页面的性能。
为了避免这种情况。我们其实可以预先告知浏览器我们要用什么资源，让他预先请求加载。这样在等脚本被加入DOM中，就可在解析到时直接执行对应脚本。
而这种功能我们是通过link标签实现的。将rel属性指定为preload，预加载器就会加载指定的资源。当然这种标签一般放在<head>中。
示例：
<link rel="preload" href="链接.js">
示例
创建一个脚本，将他放在body的最后一个子节点的位置上。让脚本输出“DOM动态创建并运行脚本+预加载优化”的字样，当然做预加载优化。
外部文件样式的写法
createScriptByDOM.js
console.log("DOM动态创建并运行脚本+预加载优化");
test.html
<head> <!--此处只写相关代码，省略规范代码-->
<link rel="preload" href="createScriptByDOM.js">
</head>
<body>
<script>
let script = document.createElement("script");
script.src = "createScriptByDOM.js";
document.body.appendChild(script);
</script>
</body>
内嵌代码的写法
test.html
<head> <!--此处只写相关代码，省略规范代码-->
<link rel="preload" href="createScriptByDOM.js">
</head>
<body>
<script>
let script = document.createElement("script");
script.innerHTML = 'console.log("DOM动态创建并运行脚本+预加载优化");';
document.body.appendChild(script);
</script>
</body>
句末语
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 N 天，点击查看活动详情
