JS代碼的加載

時間 2019-12-13

原文原文鏈接

HTML頁面中JS的加載原理：在加載HTML頁面的時候，當瀏覽器遇到內嵌的JS代碼時會中止處理頁面，先執行JS代碼，而後再繼續解析和渲染頁面。一樣的狀況也發生在外鏈的JS文件中，瀏覽器必須先花時間下載外鏈文件中的代碼，而後解析並執行它，在這個過程當中，頁面的渲染和用戶互交徹底被阻塞。因爲現代瀏覽器都容許並行下載JS文件，所以<script>標籤在下載外部資源時不會阻塞其餘的<script>標籤。遺憾的是JS下載過程仍然會阻塞其餘資源的下載。javascript

加載JS代碼優化：java

(1)因爲腳本阻塞頁面其餘資源的下載，所以推薦將全部<script>標籤儘量放到<body>標籤底部，以儘可能減小對整個頁面下載的影響。瀏覽器

(2)減小頁面包含的<script>標籤數量有助於減小HTTP請求數量，下載單個100KB的JS文件比下載5個20KB的JS文件更快。網絡

(3)經過無阻塞的方法來加載JS腳本。app

無阻塞加載JS腳本：優化

(1)當動態建立script標籤加載時，內嵌到標籤內的代碼一般當即執行(除了Firefox和Opera，它們將等待此前的全部動態腳本節點執行完畢)。url

案例：動態加載JS文件(兼容IE和其餘瀏覽器)。spa

function loadScript(url, callback){對象

var script = document.createElement ("script")ip

script.type = "text/javascript";

if (script.readyState){ //IE瀏覽器

script.onreadystatechange = function(){

if (script.readyState == "loaded" || script.readyState == "complete"){

script.onreadystatechange = null;

callback();

}

};

} else { //其它瀏覽器

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

}

script.src = url;

document.getElementsByTagName("head")[0].appendChild(script);

}

//按順序動態加載多個JS腳本

loadScript("script1.js", function(){

loadScript("script2.js", function(){ alert("All files are loaded!") });

});

(2)建立一個XHR(XMLHttpRequest)對象用於下載JS文件，接着建立一個script標籤將JS代碼注入這個標籤內。該方法優勢是，你能夠下載不當即執行的JS代碼，因爲代碼返回在<script>標籤以外，全部下載後不會自動執行，並且全部現代瀏覽器中都不會引起異常。限制是JS文件必須與頁面放置在同一個域內，不能從CDN【CDN指「內容投遞網絡」】下載。