工作踩坑之通过插入DOM引入JS在工作中碰到了一个很奇怪的现象，直接访问测试所提供的环境，重复刷新使用了vue和elem

在工作中碰到了一个很奇怪的现象，直接访问测试所提供的环境，重复刷新使用了vue和elementUI的页面，会偶现页面错乱（一看见偶先就头大啊）。

通过控制台中，对网络中的element.js文件进行禁用，终于可以稳定复现错乱的页面，这个bug似乎和element.js有关系？

经过讨论和分析，初步推测是element.js还未执行就先执行了使用到elementUI的函数方法文件，导致页面错乱。简单来说，就是一个人还没学会英语就去看英文报纸，自然看出来的全是错误的。

先来看看代码是怎么写的：

在页面中，顶部是引入所需的js文件。

而底部则是执行该页面的函数方法文件。

如果js文件的引入顺序是按序执行的话，按理是不会出现页面错乱的问题的。

这时候，好奇的目光投向了element.js。这个文件他做了什么？

原来他是动态向DOM元素中插入JS文件！真凶就是他！

让我们先回忆一下script引入的方式和执行顺序：

直接在html中写script标签。由于HTML文档从上到下解析，因此脚本是按顺序执行的。

<script src="a.js"></script>
使用ducument.write向html写入一个script标签。对于IE9以下的浏览器，采取的是内联脚本立即执行，外联脚本按序执行。其他的浏览器则是“尽力按顺序执行”

document.write('<script src="a.js"></script>')

使用js代码动态插入到DOM中。这种情况根本不能保证脚本能按顺序执行。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);

结合element.js文件中的代码，这下真相大白了！直接访问该环境，脚本并不能保证按顺序执行，导致页面的脚本比element.js先执行，从而页面不认识elementUI导致页面错乱。

由于时间紧迫，没想到什么好的修订方案，最后还是删去引用element.js，并将全部涉及到的elementUI的页面全部在html顶部按顺序引用。

在此记录一下备忘~

2024.11.24 补充，在红宝书第15页里面有详细记载了相关的问题，在此摘录。

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);

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