異步加載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就立即執行；

由此可見，上面兩種方法都存在相容性的問題；那麼就出現了第三種方法即按需加載；（還未使用，暫不貼代碼了）；