Javascript src 属性与 document.write 与 insertBefore

Question

包含 3rd 方 js 的 3 种流行方法的优缺点是什么？为什么受人尊敬的公司（jQuery、谷歌、亚马逊）使用不同的方法？在什么情况下使用这些方法更有意义？

选项 1（jQuery - src 属性）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

选项 2（GA - insertBefore）：

<script type="text/javascript">
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-WHATEVS']);
        (function() { 
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
        })();
</script>

选项 3（亚马逊 - doc.write）：

<script type="text/javascript">
    document.write(unescape('%3Cscript type="text/javascript" src="'+document.location.protocol+'//abc.cloudfront.net/pages/scripts/0000/xxx.js"%3E%3C%2Fscript%3E'))
</script>

Answer 1

选项 1 是同步包含。该 javascript 将在任何后续 javascript 之前被读取、解析和执行。

选项 2 是异步包含。它是异步加载的，并且与页面中的其他脚本相比没有保证时间。这样做的好处是页面的其余部分不会等待它加载或执行，但缺点是任何尝试使用它的东西都必须知道它何时已成功加载。您为选项 2 展示的具体示例适用于 Google Analytics，它是自包含的，不依赖于页面中的任何其他内容，因此异步并且不让页面上的任何其他内容等待加载是非常有意义的。

选项 3 仍然是同步的（类似于选项 1），但会稍微混淆脚本的包含，这会愚弄一些可能试图过滤特定脚本的过滤器。它还允许您使用自己的 javascript 来决定要包含哪些脚本或从哪里包含它们，但要同步包含它们。如果有任何理由根据加载页面进行操作，您还可以使用自己的 javascript 来操作协议 (http/https) 或域。