溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在JavaScript中實現同步、異步、延遲加載，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
一：同步加載
我們平時使用的最多的一種方式。
<script src="http://yourdomain.com/script.js"></script>
同步模式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止后續的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。所以一般建議把<script>標簽放在<body>結尾處，這樣盡可能減少頁面阻塞。
二：異步加載
異步加載又叫非阻塞加載，瀏覽器在下載執行js的同時，還會繼續進行后續頁面的處理。主要有三種方式。
方法一：也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();<async>屬性是HTML5中新增的異步支持。此方法被稱為Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種異步加載代碼。
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();但是這種加載方式執行完之前會阻止onload事件的觸發，而現在很多頁面的代碼都在onload時還執行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。
方法二：onload時的異步加載
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();這種方法只是把插入script的方法放在一個函數里面，然后放在window的onload方法里面執行，這樣就解決了阻塞onload事件觸發的問題。
注:DOMContentLoaded與load的區別。前者是在document已經解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；后者的區別在于頁面所有資源全部加載完畢。
方法三：其他方法
由于JavaScript的動態性，還有很多異步加載方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。
XHR Injection(XHR 注入)：通過XMLHttpRequest來獲取javascript，然后創建一個script元素插入到DOM結構中。ajax請求成功后設置script.text為請求成功后返回的responseText。
//獲取XMLHttpRequest對象，考慮兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http請求get方式;open()方法的第三個參數表示采用異步(true)還是同步(false)處理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}XHR Eval：與XHR Injection對responseText的執行方式不同，直接把responseText放在eval()函數里面執行。
//獲取XMLHttpRequest對象，考慮兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http請求get方式;open()方法的第三個參數表示采用異步(true)還是同步(false)處理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以彈出$,表明JS已經加載進來。click事件放在其它出會出問題，應該是還沒加載進來
$("#btn1").click(function(){
alert($(this).text());
});
}
}Script In Irame：在父窗口插入一個iframe元素，然后再iframe中執行加載JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//獲取iframe中的window要用contentWindow屬性。
doc.open();
doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
doc.close();GMail Mobile：業內JS內容被注釋，所以不會執行，在需要的時候，獲取script中的text內容去掉注釋，調用eval()執行。
<script type="text/javascript"> /* var ... */ </script>
HTML5新屬性：async和defer屬性
defer屬性：IE4.0就出現。defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會并行下載其他有defer屬性的script。而不會阻塞頁面后續處理。注：所有的defer腳本必須保證按順序執行的。
<script type="text/javascript" defer></script>
async屬性：HTML5新屬性。腳本將在下載后盡快執行，作用同defer，但是不能保證腳本按順序執行。他們將在onload事件之前完成。
<script type="text/javascript" defer></script>
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性。可以同時使用async和defer，這樣IE 4之后的所有IE都支持異步加載。
沒有async屬性，script將立即獲取（下載）并執行，期間阻塞了瀏覽器的后續處理。如果有async屬性，那么script將被異步下載并執行，同時瀏覽器繼續后續的處理。
總結： 對于支持HTML5的瀏覽器，實現JS的異步加載只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對于不支持HTML5的瀏覽器(IE可以用defer實現)，可以采用以上幾種方法實現。原理基本上都是向DOM中寫入script或者通過eval函數執行JS代碼，你可以把它放在匿名函數中執行，也可以在onload中執行，也可以通過XHR注入實現，也可以創建一個iframe元素，然后在iframe中執行插入JS代碼。
三：延遲加載
有些JS代碼在某些情況在需要使用，并不是頁面初始化的時候就要用到。延遲加載就是為了解決這個問題。將JS切分成許多模塊，頁面初始化時只加載需要立即執行的JS，然后其它JS的加載延遲到第一次需要用到的時候再加載。類似圖片的延遲加載。
JS的加載分為兩個部分：下載和執行。異步加載只是解決了下載的問題，但是代碼在下載完成后就會立即執行，在執行過程中瀏覽器處于阻塞狀態，響應不了任何需求。
解決思路：為了解決JS延遲加載的問題，可以利用異步加載緩存起來，但不立即執行，需要的時候在執行。如何進行緩存呢？將JS內容作為Image或者Object對象加載緩存起來，所以不會立即執行，然后在第一次需要的時候在執行。
1：模擬較長的下載時間：
利用thread讓其sleep一段時間在執行下載操作。
2：模擬較長的JS代碼執行時間
var start = Number(new Date());
while(start + 5000 > Number(new Date())){//執行JS}1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。
關于怎么在JavaScript中實現同步、異步、延遲加載就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
