javascript中同步載入和非同步載入兩種方式實例詳解

同步載入 

我們平常最常使用的就是這個同步載入形式： 

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

同步模式，又稱為阻斷模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的檔案載入（如圖像）、渲染、程式碼執行。 js 之所以要同步執行，是因為 js 中可能有輸出 document 內容、修改dom、重新導向等行為，所以預設同步執行才是安全的。 以前的一般建議是把3f1c4e4b6b16bbbd69b2ee476dc4f83a放在頁面結尾36cc49f0c466276486e50c850b7e4956之前，這樣盡量減少這個阻斷行為，而先讓頁面展示出來。 簡單說：載入的網路 timeline 是瀑布模型，而非同步載入的 timeline 是並發模型。

常見非同步載入

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

非同步載入又叫非阻塞，瀏覽器在下載執行 js 同時，也會繼續進行後續頁面的處理。 這個方法是在頁面中3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤內，用 js 建立一個 script 元素並插入到 document 中。這樣就做到了非阻塞的下載 js 程式碼。 async屬性是HTML5中新增的非同步支持，見後文解釋，加上好（不加也不影響）。 此方法稱為 Script DOM Element 法，且不要求 js 同源。 將js程式碼包裹在匿名函數中並立即執行的方式是為了保護變數名稱洩漏到外部可見，這是很常見的方式，尤其是在 js 庫中被普遍使用。
例如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); 
})(); 
(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})();

但是，這種載入方式在載入執行完之前會阻止onload 事件的觸發，而現在很多頁面的程式碼都在onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。 

onload 時的非同步載入

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})();

這和前面的方式差不多，但關鍵是它不是立即開始非同步載入 js ，而是在 onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。 
補充：DOMContentLoaded 與 OnLoad 事件 
DOMContentLoaded : 頁面(document)已經解析完成，頁面中的dom元素已經可用。但是頁面中引用的圖片、subframe可能還沒載入完。 
OnLoad：頁面的所有資源都載入完畢（包括圖片）。瀏覽器的載入進度在這時才停止。 
這兩個時間點將頁面載入的timeline分成了三個階段。 

以上是javascript中同步載入和非同步載入兩種方式實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！