Javascript src属性とdocument.writeとinsertBefore

第三者jを含む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>
2

1 答え

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.

2
追加された
Node.insertBefore でスクリプトタグを追加するスクリプトタグ(オプション2)を使用して(オプション1)の賛否両論を理解したいと考えていました。 code> document.write をクリックします。代わりにあなたの答えは、オプション2が async を含み、オプション3がスクリプトタグを難読化しているという事実に主に焦点を当てています。しかし、オプション1と3の両方をスクリプトタグで async を使用するように変更することはできますか?それが行われた場合、方法論に他の違いはありますか? (オプション3の難読化は別として)
追加された 著者 Carl G,
この質問は6歳以上であるかもしれませんが、Googleは "document.write vs insertBefore"のようなクエリについてここで指示します。別の質問をしてくれてありがとう、私があなたが要求した質問を書いたらコメントします。
追加された 著者 Carl G,
私はそれが良い答えだと思った。 +1。 @ user1091283 - 質問の特定のOption 2の例は、Googleアナリティクスのためのものであることに注意してください。つまり、ユーザーの視点から見ると、ロードするかどうかは関係ありません。また、オプション3では、条件付きでスクリプトを同期させたまま条件付きで含める余分なロジックを追加できます。
追加された 著者 nnnnnn,
なぜ説明なしのdownvote?
追加された 著者 jfriend00,
@nnnnnn - あなたのコメントを答えに取り入れました。
追加された 著者 jfriend00,
@CarlG - これは6歳以上の質問で、OPが興味を持ったものに答えるようだったので、あなたが知りたいことに焦点を当てた新しい質問をするのが一番良いかもしれません。投稿後、あなたは私にコメントを書くことができます。
追加された 著者 jfriend00,
うまくいけば新しい、ユーザーはトグルが何をするのか理解していないと思います。私はマットボールが完全に良い答えで何度かドライブを取得しているのを見たことがあります。私はあまりにもupvoteだろうが、私は別の時間の票が切れている。 +1
追加された 著者 Jared Farrish,
また、オプション3はXMLでは動作しません
追加された 著者 some,
うん、1標準の同期ハードコード化された方法。 2と3はプロトコルに依存しません(httpとhttps)。 2は非同期にダウンロードされるように最適化されていますが、プロトコルに基づいて2つの異なるURLを指しています。これは、Googleの側でのパフォーマンスには間違いありません。オプション3は、上記の利点を持つプロトコル(http vs https)に関係なくスクリプトをインクルードする方法とは単に異なります
追加された 著者 jermel,
@ jfriend00 - あなたの答えは私には良く見えます(誰が投票したかわからない)...私はちょうど他人が貢献できるようにもうちょっと待っています。 THX!
追加された 著者 Nick Johnson,
大変、ありがとう。
追加された 著者 Nick Johnson,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript