免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

怎么在JavaScript中實(shí)現(xiàn)同步、異步、延遲加載

這篇文章給大家介紹怎么在JavaScript中實(shí)現(xiàn)同步、異步、延遲加載，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比江永網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式江永網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋江永地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

一：同步加載

我們平時(shí)使用的最多的一種方式。

<script src="http://yourdomain.com/script.js"></script>

同步模式，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當(dāng)當(dāng)前加載完成，才能進(jìn)行下一步操作。所以默認(rèn)同步執(zhí)行才是安全的。但這樣如果js中有輸出document內(nèi)容、修改dom、重定向等行為，就會(huì)造成頁(yè)面堵塞。所以一般建議把<script>標(biāo)簽放在<body>結(jié)尾處，這樣盡可能減少頁(yè)面阻塞。

二：異步加載

異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁(yè)面的處理。主要有三種方式。

方法一：也叫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); 
})();

但是這種加載方式執(zhí)行完之前會(huì)阻止onload事件的觸發(fā)，而現(xiàn)在很多頁(yè)面的代碼都在onload時(shí)還執(zhí)行額外的渲染工作，所以還是會(huì)阻塞部分頁(yè)面的初始化處理。

方法二：onload時(shí)的異步加載

(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的方法放在一個(gè)函數(shù)里面，然后放在window的onload方法里面執(zhí)行，這樣就解決了阻塞onload事件觸發(fā)的問(wèn)題。

注:DOMContentLoaded與load的區(qū)別。前者是在document已經(jīng)解析完成，頁(yè)面中的dom元素可用，但是頁(yè)面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；后者的區(qū)別在于頁(yè)面所有資源全部加載完畢。

方法三：其他方法

由于JavaScript的動(dòng)態(tài)性，還有很多異步加載方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。

XHR Injection(XHR 注入)：通過(guò)XMLHttpRequest來(lái)獲取javascript，然后創(chuàng)建一個(gè)script元素插入到DOM結(jié)構(gòu)中。ajax請(qǐng)求成功后設(shè)置script.text為請(qǐng)求成功后返回的responseText。

 //獲取XMLHttpRequest對(duì)象，考慮兼容性。
 var getXmlHttp = function(){
 var obj;
 if (window.XMLHttpRequest)
  obj = new XMLHttpRequest();
 else
  obj = new ActiveXObject("Microsoft.XMLHTTP");
 return obj;
 }; 
 //采用Http請(qǐng)求get方式;open()方法的第三個(gè)參數(shù)表示采用異步(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對(duì)responseText的執(zhí)行方式不同，直接把responseText放在eval()函數(shù)里面執(zhí)行。 

//獲取XMLHttpRequest對(duì)象，考慮兼容性。
 var getXmlHttp = function(){
 var obj;
 if (window.XMLHttpRequest)
  obj = new XMLHttpRequest();
 else
  obj = new ActiveXObject("Microsoft.XMLHTTP");
 return obj;
 }; 
 //采用Http請(qǐng)求get方式;open()方法的第三個(gè)參數(shù)表示采用異步(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已經(jīng)加載進(jìn)來(lái)。click事件放在其它出會(huì)出問(wèn)題，應(yīng)該是還沒加載進(jìn)來(lái)
  $("#btn1").click(function(){
  alert($(this).text());
  });
 }
 }

Script In Irame：在父窗口插入一個(gè)iframe元素，然后再iframe中執(zhí)行加載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：業(yè)內(nèi)JS內(nèi)容被注釋，所以不會(huì)執(zhí)行，在需要的時(shí)候，獲取script中的text內(nèi)容去掉注釋，調(diào)用eval()執(zhí)行。

 <script type="text/javascript"> 
 /* 
 var ... 
 */ 
 </script>

HTML5新屬性：async和defer屬性
defer屬性：IE4.0就出現(xiàn)。defer屬聲明腳本中將不會(huì)有document.write和dom修改。瀏覽器會(huì)并行下載其他有defer屬性的script。而不會(huì)阻塞頁(yè)面后續(xù)處理。注：所有的defer腳本必須保證按順序執(zhí)行的。

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

async屬性：HTML5新屬性。腳本將在下載后盡快執(zhí)行，作用同defer，但是不能保證腳本按順序執(zhí)行。他們將在onload事件之前完成。

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

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性。可以同時(shí)使用async和defer，這樣IE 4之后的所有IE都支持異步加載。

沒有async屬性，script將立即獲取（下載）并執(zhí)行，期間阻塞了瀏覽器的后續(xù)處理。如果有async屬性，那么script將被異步下載并執(zhí)行，同時(shí)瀏覽器繼續(xù)后續(xù)的處理。

總結(jié)： 對(duì)于支持HTML5的瀏覽器，實(shí)現(xiàn)JS的異步加載只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對(duì)于不支持HTML5的瀏覽器(IE可以用defer實(shí)現(xiàn))，可以采用以上幾種方法實(shí)現(xiàn)。原理基本上都是向DOM中寫入script或者通過(guò)eval函數(shù)執(zhí)行JS代碼，你可以把它放在匿名函數(shù)中執(zhí)行，也可以在onload中執(zhí)行，也可以通過(guò)XHR注入實(shí)現(xiàn)，也可以創(chuàng)建一個(gè)iframe元素，然后在iframe中執(zhí)行插入JS代碼。

三：延遲加載

有些JS代碼在某些情況在需要使用，并不是頁(yè)面初始化的時(shí)候就要用到。延遲加載就是為了解決這個(gè)問(wèn)題。將JS切分成許多模塊，頁(yè)面初始化時(shí)只加載需要立即執(zhí)行的JS，然后其它JS的加載延遲到第一次需要用到的時(shí)候再加載。類似圖片的延遲加載。

JS的加載分為兩個(gè)部分：下載和執(zhí)行。異步加載只是解決了下載的問(wèn)題，但是代碼在下載完成后就會(huì)立即執(zhí)行，在執(zhí)行過(guò)程中瀏覽器處于阻塞狀態(tài)，響應(yīng)不了任何需求。

解決思路：為了解決JS延遲加載的問(wèn)題，可以利用異步加載緩存起來(lái)，但不立即執(zhí)行，需要的時(shí)候在執(zhí)行。如何進(jìn)行緩存呢？將JS內(nèi)容作為Image或者Object對(duì)象加載緩存起來(lái)，所以不會(huì)立即執(zhí)行，然后在第一次需要的時(shí)候在執(zhí)行。

1：模擬較長(zhǎng)的下載時(shí)間：

利用thread讓其sleep一段時(shí)間在執(zhí)行下載操作。

2：模擬較長(zhǎng)的JS代碼執(zhí)行時(shí)間

var start = Number(new Date());
while(start + 5000 > Number(new Date())){//執(zhí)行JS}

JavaScript的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

關(guān)于怎么在JavaScript中實(shí)現(xiàn)同步、異步、延遲加載就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章題目：怎么在JavaScript中實(shí)現(xiàn)同步、異步、延遲加載
文章網(wǎng)址：http://m.newbst.com/article24/jeeice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、用戶體驗(yàn)、微信公眾號(hào)、建站公司、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司