性能優化——異步加載js文件

爲什麼要異步加載：
同步加載會阻塞瀏覽器的後續處理，即只有噹噹前文件加載完畢之後才能進行下一步的文件加載（如圖像）、渲染、代碼執行。如果js中有輸出document內容、修改DOM、重定向等行爲，就會造成頁面阻塞。

什麼叫異步加載：
異步加載不會阻塞瀏覽器的後續操作，即在加載執行js的同時，並行加載其他文件渲染頁面。

1. async屬性

• async屬性規定js文件一旦可用就會執行，腳本相對於頁面的其餘部分異步地執行（當頁面繼續進行解析時，腳本將被執行）

• async 屬性僅適用於外部腳本（只有在使用 src 屬性時）。

• async 屬性不能保證執行順序。

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

2. defer屬性

• defer 屬性規定是否對腳本執行進行延遲，直到頁面加載爲止。

• defer屬性表示腳本不會改變文檔的內容，瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶爲止。以便加快處理文檔的速度。

• 只有 Internet Explorer 支持 defer 屬性。

<script type="text/javascript" defer="defer"></script>

3. 動態創建DOM

• 不要求js同源

• 這些代碼應被放置在標籤前(接近HTML文件底部)

• 這種加載方式在加載執行完之前會阻止 onload 事件的觸發，而現在很多頁面的代碼都在 onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

4. onload時動態創建DOM

• 不要求js同源

• 這些代碼應被放置在標籤前(接近HTML文件底部)

• 這種加載方式不是立即開始異步加載 js ，而是在 onload 時纔開始異步加載。這樣就解決了阻塞 onload 事件觸發的問題。

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>