(js)异步加载

• 默认加载js方式是同步加载(阻塞模式)
• 加载script脚本会阻塞css和其他文件加载 所以一般放在后面(只是减少阻塞 不能根本解决)

defer和async

• defer(IE8及以下): 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
• async(W3C html5属性 IE9及以上支持):表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
• 两者功能类似，都会告诉浏览器立即开始下载。不过与defer不同的是，async的脚本并不保证能按照它们出现的次序执行
• 如果想把script脚本写在加载css及其他前，加上defer，避免出现直接执行别且操作DOM对象的js报找不到对象的错误。相当于 window.onload
• 异步加载的js脚本里不要写dom操作,所以完全与dom无关的就可以使用异步加载
• 异步脚本保证会在页面的load事件前执行，但可能会在DOMContentLoaded之前或之后

<script type="text/javascript" src="util.js" defer="defer"></script>

什么时候执行？主动创建就是异步加载

<script type="text/javascript">
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = 'util.js'

  document.body.appendChild(s);  //此步才会执行
//这里会阻塞window.onload
</script>

加载文件

在onload之后进行异步加载

(function(){
  function async_load() {
  	//动态加载脚本
    var s = document.createElement("script");
    var oScript = document.getElementsByTagName('script')[0];
    s.type = "text/javascript";
    s.src = "util.js";
    document.body.appendChild(s); //此步才会执行
    oScript.parentNode.insertBefore(s,oScript);
  }
  if(window.attachEvent) {
    window.attachEvent('onload',async_load)
  }else {
    window.addEventListener('load', async_load, false)
  }
})()

标签不影响script 但script影响标签执行

异步加载demo