Js延迟加载的方式都有哪些？defer和async的区别是啥？

Posted 2023-05-09

参考技术A J s延迟加载的方式有哪些？

给javascript标签添加 defer和async属性。

defer和async的区别是什么？

1、defer和async都是使script异步加载的意思，当都没有设置这个属性的时候，html的加载会被阻塞等着script加载完成和执行完成后再渲染页面。

2、当设置了async时，异步加载，一旦加载完成则阻塞html渲染，进行执行，而且如果有多个script标签则谁先加载完，谁先执行。

3、当设置了defer时，异步加载，不会阻塞html，待html渲染完毕后再进行script执行。

注意：ie只支持defer

延迟加载JS

Labjs库解决异步加载的兼容性问题

<script src="a.js" defer="defer"></script>
<script src="b.js" defer="defer"></script>
<script src="c.js" defer="defer"></script>

<script src="a.js" async="async"></script>
<script src="b.js" async="async"></script>
<script src="c.js" async="async"></script>