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标签中的内容会正常运行。
只有在泥泞的道路上才能留下脚印