在網頁上使用多個腳本塊有什么不同？

Question

編輯：正如Andrew Moore所指出的那樣，這個問題與Google Analytics的兩個獨立腳本標簽重復了嗎？ 所以應該刪除這個問題以避免混亂Stack Overflow，除非有一點保持這個，因為它可能會出現在略有不同的搜索中。

在網頁上使用多個腳本塊有何不同？ 我已經在標准代碼中粘貼了Google Analytics（分析）作為示例，我看到了其他地方使用的相同模式。 為什么這段代碼分成兩個獨立的腳本塊而不是僅使用一個？

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    try{
        var pageTracker = _gat._getTracker("UA-xxxxxx-x");
        pageTracker._trackPageview();
    } catch(err) {}
</script>

Answer 1

第二個<script>包含依賴於google-analytics.com/ga.js加載的代碼。

非延遲腳本按它們在DOM中的順序執行。

第一個<script>注入了新<script>后本身（與src指向谷歌的ga.js ），這立即加載並執行-最后才第二<script>得到執行。

Answer 2

<script>標簽按順序執行。 如果前一個<script>塊未執行，則無法執行<script>塊。

第一個<script>標記負責創建將加載外部js的Google <script>標記。 第一個<script>執行完畢后，DOM如下所示：

<script></script> <!-- First Script Tag -->
<script></script> <!-- Google Injected Script -->
<script></script> <!-- Second Script Tag -->

這保證了第二個<script>標記在.js加載完成之前不會執行。 如果將第一個和第二個<script>組合在一起，這將導致_gat變量未定義（因為在第一個腳本執行_gat ，Google注入的腳本不會開始加載）。

Answer 3

在您的示例中，第一個腳本塊使用document.write編寫另一個腳本元素，該元素加載外部腳本，然后第二個腳本元素使用該外部腳本中定義的內容。 我很確定將它分成兩個腳本塊是必要的。

如果你沒有使用這種奇怪的技巧，那么將多個腳本塊放在一行通常不會有什么特別之處。 將它們放在頁面的不同部分非常有用，因為您希望在加載文檔時運行腳本。 如果您的頁面很長，您可能希望在加載時運行一些腳本，以便盡快初始化。 應盡可能早地使用小部件替換元素，以避免在頁面最終完成加載時跳轉。

Answer 4

如果第一個塊中的代碼以異常結束，則第二個部分也將起作用。