html5里面的延迟加载属性

html5中给script标签引入了 async 和 defer 属性。

原理：
带有async属性的script标签，会在浏览器解析时立即下载脚本同时不阻塞后续的document渲染和script加载等事件，从而实现脚本的异步加载。

使用：
带有defer属性的script标签，和async拥有类似的功能。并且他们有可以附带一个onload事件<script src="" defer onload="init()">。

区别：
async和defer的区别在于：async属性会在脚本下载完成后无序立即执行，defer属性会在脚本下载完成后按照document结构顺序执行。

由于defer和async的兼容性问题，我们通常使用动态创建script标签的方式来实现异步加载脚本，即

    <script>
        document.write('<script src="./plugin/lazysizes.min.js" async><\/script>');
    </script>

该方式也可以避免阻塞。

注意：document.write()也能写入含有script标签的字符串，但是需要转义。写入的script标签中的内容会正常运行。

转载于:https://www.cnblogs.com/wang715100018066/p/7845549.html