標籤：list size mil 順序 ber 動態性 lib 分頁 cat
一、同步載入我們平時使用的最多的一種方式。
<script src="http://yourdomain.com/script.js"></script><script src="http://yourdomain.com/script.js"></script>
同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止後續的解析，只有噹噹前載入完成，才能進行下一步操作。所以預設同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重新導向等行為，就會造成頁面堵塞。所以一般建議把<script>標籤放在<body>結尾處，這樣儘可能減少頁面阻塞。
二、非同步載入非同步載入又叫非阻塞載入，瀏覽器在下載執行js的同時，還會繼續進行後續頁面的處理。主要有三種方式。
方法一：也叫Script DOM Element1 (function(){2 var scriptEle = document.createElement("script");3 scriptEle.type = "text/javasctipt";4 scriptEle.async = true;5 scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";6 var x = document.getElementsByTagName("head")[0];7 x.insertBefore(scriptEle, x.firstChild); 8 })();
<async>屬性是HTML5中新增的非同步支援。此方法被稱為Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種非同步載入代碼
1 (function(){;2 var ga = document.createElement(‘script‘); 3 ga.type = ‘text/javascript‘; 4 ga.async = true; 5 ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘; 6 var s = document.getElementsByTagName(‘script‘)[0]; 7 s.parentNode.insertBefore(ga, s); 8 })();
但是這種載入方式執行完之前會阻止onload事件的觸發，而現在很多頁面的代碼都在onload時還執行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。
方法二：onload時的非同步載入 1 (function(){ 2 if(window.attachEvent){ 3 window.attachEvent("load", asyncLoad); 4 }else{ 5 window.addEventListener("load", asyncLoad); 6 } 7 var asyncLoad = function(){ 8 var ga = document.createElement(‘script‘); 9 ga.type = ‘text/javascript‘; 10 ga.async = true; 11 ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘; 12 var s = document.getElementsByTagName(‘script‘)[0]; 13 s.parentNode.insertBefore(ga, s);14 }15 )();
這種方法只是把插入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。
1 //擷取XMLHttpRequest對象，考慮相容性。 2 var getXmlHttp = function(){ 3 var obj; 4 if (window.XMLHttpRequest) 5 obj = new XMLHttpRequest(); 6 else 7 obj = new ActiveXObject("Microsoft.XMLHTTP"); 8 return obj; 9 }; 10 //採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理11 var xmlHttp = getXmlHttp();12 xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);13 xmlHttp.send(); 14 xmlHttp.onreadystatechange = function(){15 if (xmlHttp.readyState == 4 && xmlHttp.status == 200){16 var script = document.createElement("script");17 script.text = xmlHttp.responseText;18 document.getElementsByTagName("head")[0].appendChild(script);19 }20 }
XHR Eval：與XHR Injection對responseText的執行方式不同，直接把responseText放在eval()函數裡面執行。
1 //擷取XMLHttpRequest對象，考慮相容性。 2 var getXmlHttp = function(){ 3 var obj; 4 if (window.XMLHttpRequest) 5 obj = new XMLHttpRequest(); 6 else 7 obj = new ActiveXObject("Microsoft.XMLHTTP"); 8 return obj; 9 }; 10 //採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理11 var xmlHttp = getXmlHttp();12 xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);13 xmlHttp.send(); 14 xmlHttp.onreadystatechange = function(){15 if (xmlHttp.readyState == 4 && xmlHttp.status == 200){16 eval(xmlHttp.responseText);17 //alert($);//可以彈出$,表明JS已經載入進來。click事件放在其它出會出問題，應該是還沒載入進來18 $("#btn1").click(function(){19 alert($(this).text());20 });21 }22 }
Script In Irame：在父視窗插入一個iframe元素，然後再iframe中執行載入JS的操作。
1 var insertJS = function(){alert(2)};2 var iframe = document.createElement("iframe");3 document.body.appendChild(iframe);4 var doc = iframe.contentWindow.document;//擷取iframe中的window要用contentWindow屬性。5 doc.open();6 doc.write("<script>var insertJS = function(){};<\/script><body onload=‘insertJS()‘></body>");7 doc.close();
GMail Mobile：業內JS內容被注釋，所以不會執行，在需要的時候，擷取script中的text內容去掉注釋，調用eval()執行。
1 <script type="text/javascript"> 2 /* 3 var ... 4 */ 5 </script>HTML5新屬性：async和defer屬性
defer屬性：IE4.0就出現。defer屬聲明指令碼中將不會有document.write和dom修改。瀏覽器會並行下載其他有defer屬性的script。而不會阻塞頁面後續處理。註：所有的defer指令碼必須保證按順序執行的。
<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將被非同步下載並執行，同時瀏覽器繼續後續的處理。
三、消極式載入有些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}
這段代碼將使JS執行5秒才完成！
JS消極式載入機制(LazyLoad)：簡單來說，就是在瀏覽器滾動到某個位置在觸發相關的函數，實現頁面元素的載入或者某些動作的執行。如何?瀏覽器滾動位置的檢測呢？可以通過一個定時器來實現，通過比較某一時刻頁面目標節點位置和瀏覽器捲軸高度來判斷是否需要執行函數。
JS非同步載入的三種方式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
