首頁  >  文章  >  web前端  >  html中載入JavaScript腳本檔案的常用方式總結

html中載入JavaScript腳本檔案的常用方式總結

伊谢尔伦
伊谢尔伦原創
2017-07-21 16:08:191515瀏覽

當瀏覽器遇到(內嵌)3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤時,目前瀏覽器無從獲知javaScript是否會修改頁面內容。因此,這時瀏覽器會停止處理頁面,先執行javaScript程式碼,然後再繼續解析和渲染頁面。同樣的情況也發生在使用 src 屬性加在javaScript的過程中(即外鏈 javaScript),瀏覽器必須先花時間下載外鏈文件中的程式碼,然後解析並執行它。在這個過程中,頁面渲染和使用者互動完全被阻塞了。

也就是說:每當瀏覽器解析到3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤(無論內嵌或外鏈)時,瀏覽器會(一根筋地)優先下載、解析並執行該標籤中的javaScript程式碼,而阻塞了其後所有頁面內容的下載和渲染。

方式一:慣例的做法

#最傳統的方式是插入head標籤內3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤。

然而這種常規的做法卻隱藏著嚴重的效能問題。根據上述對3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤特性的描述,我們知道,在該範例中,當瀏覽器解析到3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤時,瀏覽器會停止解析其後的內容,而優先下載腳本文件,並執行其中的程式碼,這意味著,其後的test.css樣式檔案和6c04bd5ca3fcae76e30b72ad730ca86d標籤都無法被加載,由於6c04bd5ca3fcae76e30b72ad730ca86d標籤無法被加載,那麼頁面自然就無法渲染了。因此在該javaScript程式碼完全執行完之前,頁面都是一片空白。

<script type="text/javaScript" src="example.js"></script>

方式二:經典的做法

既然3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤會阻塞其後內容的加載,那麼將3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤放到所有頁面內容之後不就可以避免這種糟糕的狀況了嗎? 將所有的3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤盡可能地放到6c04bd5ca3fcae76e30b72ad730ca86d標籤底部,以盡量避免對頁面其餘部分下載的影響。

在IE8+瀏覽器上已經實現了腳本並行下載,但在某些瀏覽器中(即使腳本文件放到了6c04bd5ca3fcae76e30b72ad730ca86d標籤底部),頁面中腳本仍是一個接著一個加載的。所以我們需要下一個方法,即:動態載入腳本。

方式三:動態腳本

#透過文件物件模型(DOM),我們幾乎可以頁面任意地方創建。


<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

上述程式碼動態建立了一個外鏈file1的3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤,並將其加入93f0f5c25f18dab9d176bd4f6de5d30e標籤內。這種技術的重點在於:

無論在何時啟動下載,檔案的下載和執行過程不會阻塞頁面其他進程(包括腳本載入)。
然而這種方法也是有缺陷的。這種方法載入的腳本會在下載完成後立即執行,那麼意味著多個腳本之間的運行順序是無法保證的(除了Firefox和Opera)。當某個腳本對另一個腳本有依賴關係時,就很可能發生錯誤了。例如,寫一個jQuery程式碼,需要引入jQuery庫,然而你寫的jQuery程式碼檔案很可能會先完成下載並立即執行,這時瀏覽器會報錯-'jQuery未定義'之類的,因為此時jQuery庫還未下載完成。於是做出以下改進:


<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

上述程式碼改進的地方就是增加了一個回呼函數,該函數會在對應腳本檔案載入完成後被呼叫。這樣便可以實現順序加載了,寫法如下(假設file2依賴file1,file1和file3相互獨立):

loadScript(‘file1.js&#39;,function(){ loadScript(‘file2.js&#39;,function(){}); }); loadScript(‘file3.js&#39;,function(){});

file2會在file1加載完後才開始加載,保證了在file2執行前file1已經準備妥當。而file1和file3是並行下載的,互不影響。 雖然loadScript函數已經夠好,但還是有些不盡人意的地方-透過分析這段程式碼,我們知道,loadScript函數中的順序載入是以腳本的阻塞載入來實現的(正如上述紅字部分指出的那樣) 。而我們真正想實現的是——腳本同步下載並按相應順序執行,即並行加載並順序執行。

以上是html中載入JavaScript腳本檔案的常用方式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn