瀏覽器加載靜態資源和js的方式都是線性加載，所以一般情況可以將js放到</body>前，防止UI線程的阻塞。
而某些時候我們既希望js在整個網頁的頭部就加載，又擔心js阻塞導致網站加載緩慢，就可以用到無阻塞加載js技術。
Dynamic Script Elements 動態腳本元素
DOM允許我們使用Javascript動態創建HTML的幾乎所有文檔內容，一個新的<script>元素可以非常容易的通過標準DOM創建：
var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "file1.js"; document.body.appendChild(script); 新的<script>元素加載file1.js源文件。此文件當元素添加到頁面后立刻開始下載。此技術的重點在于：無論在何處啟動下載，文件的下載和運行都不會阻塞其他頁面處理過程。
當文件使用動態腳本節點下載時，返回的代碼通常立即執行（除了Firefox和Opera，它們將等待此前的所有動態腳本節點執行完畢）。
大多數情況下，我們希望調用一個函數就可以實現Javascript文件的動態下載。下面的函數封裝實現了標準實現和IE實現：
function loadScript(url, callback){ var script = document.createElement ("script") ; script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } loadScript("file1.js", function(){ //調用 alert("File is loaded!"); }); 此函數接受兩個參數：Javascript文件的Url和一個當Javascript接收完成時觸發的回調函數。屬性檢查用于決定監視哪種事件。最后一步src屬性，并將javascript文件添加到head。
動態腳本加載是非阻塞Javascript下載中最常用的模式，因為它可以跨瀏覽器，而且簡單易用。
以上這篇無阻塞加載js,防止因js加載不了影響頁面顯示的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
