js的異步加載及promise的三種狀態

---恢復內容開始---

js異步加載

同步加載

<script src="http://baidu.com/script.js"></script>  --->  我們平時經常使用的就是這種同步加載的形式

 

同步模式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止了后續的解析，因此停止了后續的文件加載（如圖像）、渲染、代碼執行。

 js 之所以要同步執行，是因為 js 中可能有輸出 document 內容、修改dom、重定向等行為，所以默認同步執行才是安全的。

以前的一般建議是把<script>放在頁面末尾</body>之前，這樣盡可能減少這種阻塞行為，而先讓頁面展示出來。

 

異步加載

異步加載有幾種方式，現在介紹以下兩種常用的

1. async： async的定義和用法(是HTML5的屬性) 
   async 屬性規定一旦腳本可用，則會異步執行。 
   示例： 

<script type="text/javascript" src="demo_async.js" async="async"></script> 

 

注：async 屬性僅適用於外部腳本（只有在使用 src 屬性時）
注：有多種執行外部腳本的方法： 

 

• 如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行 
• 如果 async="async"：腳本相對於頁面的其余部分異步地執行（當頁面繼續進行解析時，腳本將被執行） 
• 如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行腳本 

　　　2.創建js腳本，插入到DOM中，加載完畢后進行callBack,例：

function loadScript(url, callback){ 
var script = document.createElement_x("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: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
} 

 

promise的三種狀態

 promise我還似懂非懂，目前只知道有三種狀態可以在不同的時候調用，以后實際過程中遇到我會再補充。

就醬，以上。