html中載入JavaScript腳本檔案的常用方式總結-js教程-PHP中文網

首頁

web前端

js教程

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

伊谢尔伦

Jul 21, 2017 pm 04:08 PM

htmljavascriptjs

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

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

方式一：慣例的做法

#最傳統的方式是插入head標籤內<script>標籤。 </script>

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

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

方式二：經典的做法

既然<script>標籤會阻塞其後內容的加載，那麼將<script>標籤放到所有頁面內容之後不就可以避免這種糟糕的狀況了嗎？將所有的<script>標籤盡可能地放到<body>標籤底部，以盡量避免對頁面其餘部分下載的影響。 </script>

在IE8+瀏覽器上已經實現了腳本並行下載，但在某些瀏覽器中（即使腳本文件放到了

標籤底部），頁面中腳本仍是一個接著一個加載的。所以我們需要下一個方法，即：動態載入腳本。

方式三：動態腳本

#透過文件物件模型（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的<script>標籤，並將其加入<head>標籤內。這種技術的重點在於：</script>

無論在何時啟動下載，檔案的下載和執行過程不會阻塞頁面其他進程（包括腳本載入）。
然而這種方法也是有缺陷的。這種方法載入的腳本會在下載完成後立即執行，那麼意味著多個腳本之間的運行順序是無法保證的（除了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

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。