异步加载JS之async、defer

继前面了解的JS加载时间线，然后对JS的异步加载的方式进行了更深一步的了解；

默认情况下，js文件是同步加载的，当页面加载到js文件时，页面就会被阻断在这个地方，阻断了HTML、CSS的加载线；

为什么不异步加载js呢？（因为，js会修改HTML、CSS）；

又因为js是同步加载的，所以对于不会修改页面的js工具包来说，是浪费了效率的，因为他阻断了HTML、CSS的加载线；所以，我们就希望对于这样（不调用就不会对页面有影响的工具包）工具包，他应该是异步加载的；

异步加载简单的两种方式

1、defer属性，用法：

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

这种方法只有IE浏览器能用；可以引入外部文件也可以在内部写代码；

但是要等到文档解析完才能执行（也就是dom树解析完毕，而不是加载完毕）；

2、async属性，用法：

<script type="text/javascript" src="example.js" async="async"></script>
           

这个方法适用于除IE外的其他浏览器，是HTML5的新属性；

只能外部引用文件，即具有src属性；

加载完example.js就立即执行；

由此可见，上面两种方法都存在兼容性的问题；那么就出现了第三种方法即按需加载；（还未使用，暂不贴代码了）；