script標籤有一個很不常用的 async 屬性,這個屬性最早是由FireFox先搞出來的,然後得到了 Chrome 和 Safari 的支援,但是很不幸的是IE不支援該屬性。
關於async的介紹可以見這裡:http://www.w3.org/TR/html5/scripting-1.html#attr-script-async
async 屬性我們大致可以這樣去理解:
當script的 async 屬性被置為 true 時,指令碼的執行序為非同步。即不按照掛載到 Dom 的序順執行 ,相反如果是 false 則按掛載的順序執行。
如果script標籤被直接編碼到html中,那黙認的async屬性為 false ,如果script 是由 document.createElement("script")得到,那麼 async 屬性為 true
IE、Safari和Opera是完全不鳥這個屬性了,如果是動態建立script標籤,Opera會按script 掛到Dom的序順依次執行,但是 IE瀏覽器和 Safari 此時很不給力了非同步執行了。
那麼這裡就會產生一個問題, 我們有一個動態載入JavaScript的需求,而且是隨時都有可能動態載入一個或多個Javascript指令碼,而且這個載入一定是跨域的。使用 xhr (動態載入JavaScript代碼)注入的方式肯定是不能考慮了。那如何做到並序下載按序執行呢?
我們可以嘗試這種辦法,首先我們使用一個type="text/seed"的script標籤把所有指令碼下載下來,你也可以設定成任意你想設定的東西 text/someelse 當然不能寫javascript了。完成所有的指令碼下載後,再依序重建script標籤,並把標籤掛入到Dom樹之中。
這相當於利用瀏覽器的cache把檔案預先載入進來,然後再一個個執行。但是這個方案卻是一個沒有理論基礎的,因為我不知道瀏覽器會怎麼利用cache。但是目前所測試的瀏覽器上都達到了預期的結果。