<script> ? 這不就是直接執行script指令碼嗎？
以前的我這有認為，但是今天卻知道了他的奧祕。他並沒有表面的那麼簡單。
屬性
<script>擁有7個屬性，沒想到吧！
- async
- boolean
- 非同步執行該指令碼，但不保證按照指定它們的先後順序執行
- defer
- boolean
- 通知瀏覽器該指令碼將在文件完成解析後遇到
</html>，並會按照它們出現的先後順序執行。但會在觸發DOMContentLoaded事件前執行。
- integrity
- 包含使用者代理可用於驗證已提取資源是否已無意外操作的內聯後設資料
- src
- type
- text
- crossorigin
- 使那些將靜態資源放在另外一個域名的站點列印錯誤資訊,就是將跨域報錯變為同源報錯
在XHTML文件中，要把async屬性設定為 async = "async", defer = "defer"
知道了那幾個屬性接下來，來看看下面這個圖：
- 第一個光禿禿的
<script>說明了，在html解析中，如果有<script>的話，html會在Script下載並且執行的時候，暫停解析。 - 第二個帶
async屬性的<script>，如圖所示，也就是他下載Script的時候是非同步的，但是隻要Script檔案下好了，那麼就馬上執行。 - 第三個帶
defer屬性的<script>，其實和上面帶async屬性一樣都是非同步執行去下載Script檔案的。但是在這個帶有defer的則是在html全部解析完畢之後才去執行Script檔案。而且它是按照載入順序執行指令碼的，這一點要善加利用。顯然defer是最接近我們對於應用指令碼載入和執行的要求的
使用動態建立的<script>標籤元素來下載並執行程式碼
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);
複製程式碼這個技術的重點在於：
無論何時啟動下載，檔案的下載和執行過程不會阻塞頁面其他程式。
參考：
《高效能JavaScript》
使用XHR物件下載JS程式碼注入頁面
function loadScript(url, callback){
var script = document.createElement(
"e");
script.type = "text/javascript";
if(script.readyState){ //ie
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechage = null;
callback();
}
};
} else {
script.onload = function(){
callback();
}
}
}
loadScript("the-rest.js", function(){
Application.init()
});
複製程式碼這樣做實現了動態建立標籤元素並下載，其次當第二個指令碼檔案下載時，應用所需的所有DOM結構已經建立完畢，並做好了互動的準備,從而避免了需要另一個事件來檢測頁面是否準備好。