1. 程式人生 > >js的異步加載及promise的三種狀態

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

使用 create 文件 stat src 將在 safari afa 停止

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

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我還似懂非懂,目前只知道有三種狀態可以在不同的時候調用,以後實際過程中遇到我會再補充。

就醬,以上。

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