Question

包含第三方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）或域。

Javascript src属性与document.write对比insertBefore

1 个答案: