在解釋之前先鋪墊幾個知識點。

        DomTree：在頁面渲染時候會把html構建成一個樹形結構，把標籤全部掛在樹形結構上，構建DOM樹採用深度優先原則。

        Dom解析：繪製DOM樹過程中，當遇到外部引入的檔案標籤時候，不用等到DOM元素全部載入完成再放到DOM樹上，只知道是什麼就可以了，DOM樹的構建完畢表示所有DOM節點解析完畢。

        CssTree：當DOM樹構建完畢之後，開始構建CSS樹，構建CSS樹規則和構建Dom樹一樣採用深度優先原則。

        randerTree：當CSS樹構建完畢之後，CSS樹和Dom樹合成rander樹

        當randerTree構建完成之後，瀏覽器開始渲染頁面。渲染引擎按照randerTree的規則渲染。

        當我們渲染完成頁面的時候，有時候需要js事件去動態改變頁面中Dom元素，改變Dom元素有兩種，一種是重排，一種是重繪。

        重排：reflow----浪費瀏覽器效率。能產生重排的有：dom節點的刪除和增加。dom節點的寬高變化，dom節點的位置變化，offsetWidth/offsetHeight，

重繪：repaint----重排的是html文件頁面，而重繪的是css，相對於重排，浪費瀏覽器效率所造成的影響較小。

        終於到正文了，我們看了上面我們知道，當瀏覽器繪製頁面的時候，js有時候會載入不當會阻礙頁面的繪製。

        js載入的缺點

        載入工具方法沒必要阻塞文件，過得js載入會影響頁面載入效率，當網速不好的時候，那麼整個網站將等待js載入而不進行後續渲染。
        有些工具有時候需要按需載入，用到時候再載入，不用就不載入。

js非同步載入的三種方法

                defer = “defer”

                defer非同步載入，但要等到Dom文件全部解析完成之後才被執行，只能IE9一下能用，也可以將程式碼寫到內部

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

<script defer = "defer">
console.log("a");
</script>

上面兩種方式都可以。

                async = “async”

                async非同步載入，載入完成就執行，async只能載入外部指令碼，不能把程式碼寫到script標籤裡面。
   

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

                預載入--非同步

                我們知道document可以建立Dom標籤，我們可以當我們需要外部js的時候建立script標籤，

var script = document.createElement('script');
script.src = 'demo.js';
script.type = 'text/javascript';
document.head.appendChild(script);

        我們知道執行上述程式碼是需要耗時間的，當demo.js中有個a函式功能是輸出a，此時我們執行a（），肯定會報錯，因為，當我們程式碼還沒有解析完成之後我們執行a（），此時a函式還沒有解釋出來，所以報錯，        預載入必須下載完成之後才能執行，load事件不只是window上有，script上也有，load事件可以當預載入完成之後再執行，相容性很好，但是有個重要的缺點:IE上沒有。

script.onload = function(){
a();
}

        不相容IE，這麻煩大了，但是IE自己有辦法，在IE上script上有個狀態碼，script.readyState。這個屬性裡面有值，當正在載入時候，script.readyState = “loading”，當載入完成之後，script.readyState = "loaded" 或者 script.readyState = "complete",        出現上面這個東西，當然IE不會讓它自己孤獨著，在IE裡script標籤有個readyStatechange事件，這個事件監聽的是，當script.readyState值變化的時候觸發事件，

script.onreadyStatechange = function(){
if(scriptreadyState == "loaded" || script.readyState == "complete".){
//程式碼執行
}
}

        最後我們封裝函式，實現我們按需載入的功能。

                function loadScript(url,callback){
                        var script = document.createElement('script');
                        script.type = "text/javascript";
                        if(script.readyState){
                            script.onreadyStatechange = function(){
                                if (script.readyState == "loaded" || script.readyState == "complete") {
                                    obj[callback]();
                                }
                            }    
                        }else{
                            script.onload = function(){
                                obj[callback]();
                            }
                        }
                        script.src = url;
                        document.head.appendChild(script);
                    }
                    loadScript('demo.js','test');

           

JavaScript語言我個人感覺是最有意思的了，我也是一個初學者，遇到問題，喜歡在部落格上分享，

也希望能幫到大家。一個初學者，有什麼不足或者紕漏的話，希望在下面評論出來，相互學習，共同進步

--主頁傳送門--