JavaScript src属性与document.write与insertBefore [英] Javascript src attribute vs. document.write vs. insertBefore

问题描述

包括第3方js在内的3种流行方法的优缺点是什么?为什么受人尊敬的公司(jQuery，Google，Amazon)使用不同的方法?在什么情况下使用这些方法中的每种方法更有意义?

选项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(Amazon-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>

解决方案

选项1 是同步包含.该javascript将在以下任何javascript之前被读取，解析和执行.

选项2 是异步包含.与页面中的其他脚本相比，它不是异步加载的，并且没有保证的时间.这样的好处是页面的其余部分不会等待它的加载或执行，但是缺点是任何尝试使用它的人都必须知道何时成功加载了它.您为选项2展示的特定示例是针对Google Analytics(分析)的，它是自包含的，不依赖于页面中的任何其他内容，因此完全可以异步进行，并且不让页面上的任何其他内容等待加载. >

选项3 仍然是同步的(与选项1相似)，但是使脚本的包含内容有些模糊，使一些可能试图过滤特定脚本的过滤器变得愚蠢.它还允许您使用自己的javascript来决定要包含哪些脚本或从何处包含它们，但是要同步包含它们.如果有任何理由基于加载页面，您也可以使用自己的JavaScript来操作协议(http/https)或域.

What are the pros and cons of the 3 popular methods for including 3rd party js? Why do respected companies (jQuery, Google, Amazon) use different methods? In what situations does it make more sense to use each of these methods?

Option 1 (jQuery - src attribute):

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

Option 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>

Option 3 (Amazon - 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>

解决方案

Option 1 is synchronous inclusion. That javascript will be read, parsed and executed before any following javascript.

Option 2 is asynchronous inclusion. It is loaded asychronously and has no guaranteed timing vs. other scripts in the page. This has the advantage that the rest of the page does not wait for it to load or execute, but the disadvantage that anything trying to use it has to know when it has been successfully loaded. The specific example you show for option 2 is for Google Analytics which is self contained and not dependent upon anything else in the page so it makes perfect sense to be asynchronous and not make anything else on the page wait for it to load.

Option 3 is still synchronous (like option 1), but obfuscates the inclusion of the script a little bit which fools some filters that may be trying to filter a specific script. It also allows you to use your own javascript to decide what scripts to include or where to include them from, but to have them included synchronously. You can also use your own javascript to manipulate the protocol (http/https) or domain if there's any reason to do that based on the loading page.

这篇关于JavaScript src属性与document.write与insertBefore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！