在网页上使用多个脚本块有什么不同？

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>完成执行后,DOM如下所示:

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

这保证了第二个<script>标签在.js完成加载之前不会执行.如果第一个和第二个<script>组合在一起,这将导致_gat变量未定义(因为在第一个脚本执行完毕之前,Google注入的脚本不会开始加载).