淺談script標籤

<script> ? 這不就是直接執行script腳本嗎？

之前的我這有認爲，可是今天卻知道了他的奧祕。他並無表面的那麼簡單。

屬性

<script>擁有7個屬性，沒想到吧！

• async
  • boolean
  • 異步執行該腳本，但不保證按照指定它們的前後順序執行
• defer
  • boolean
  • 通知瀏覽器該腳本將在文檔完成解析後遇到</html>，並會按照它們出現的前後順序執行。但會在觸發 DOMContentLoaded 事件前執行。
• integrity
  • 包含用戶代理可用於驗證已提取資源是否已無心外操做的內聯元數據
• src
• type
• text
• crossorigin
  • 使那些將靜態資源放在另一個域名的站點打印錯誤信息,就是將跨域報錯變爲同源報錯

在XHTML文檔中，要把async屬性設置爲 async = "async", defer = "defer"

知道了那幾個屬性接下來，來看看下面這個圖：

1. 第一個光禿禿的<script>說明了，在html解析中，若是有<script>的話，html會在Script下載而且執行的時候，暫停解析。
2. 第二個帶async屬性的<script>，如圖所示，也就是他下載Script的時候是異步的，可是隻要Script文件下好了，那麼就立刻執行。
3. 第三個帶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結構已經建立完畢，並作好了交互的準備,從而避免了須要另外一個事件來檢測頁面是否準備好。

參考

• MDN
• SegmentFault