异步加载js的方式

[bibi7]

比较耳熟的主要有defer和async

<script src="../x.js" defer></script>
<script src="../x.js" async></script>

他们的作用都是起到一个异步加载，防止js阻塞dom渲染的效果，不过还是有点细微的差别：

1. async在下载完毕之后会立即执行，defer在下载完毕后会等到dom渲染完毕后再执行，同时defer会在window.onload之前触发
2. 如果有多个defer，会按照他们的顺序依次触发，async不能保证加载顺序（不过这里高程又提到了其实defer不一定完全按照顺序触发

动态创建script

同样也可以动态创建script来进行异步加载js：

const script = document.creatElement('script');
script.src = 'xxxx.js'

document.body.append(script)

由于设置 src 并不会开始下载，而是要append到文档中才会开始下载，所以也可以自行选择append的时机

通过xhr的方式

//看看就好，估计没啥人会这么用
let xhr = new XmlHttpRequest();
xhr.open('get', 'xxx.js', true);
xhr.send();
xhr.onreadystateChange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        eval(xhr.responseText)
    }
}

[bibi7]

参考