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标签中的内容会正常运行。

posted @ 2017-11-16 17:48  最爱小虾  阅读(4938)  评论(0编辑  收藏  举报