2

HTMLファイルでのこれら2つのJavaScript実装の違いは何ですか?

  1. <script src="foo.js" type="text/javascript"></script>

  2. Google Analyticsがプログラムで行うように、次のようになります。

      (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);
        })();
    

ブラウザがHTMLページをロード/レンダリングする方法に違いはありますか、またはそのようなJSスクリプトをキャッシュするための接続にいくつかの違いがありますか?

4

2 に答える 2

5

最初のスクリプトタグは、ブラウザにそのファイルを同期的にプルするように強制します。つまり、ブラウザは、ページのレンダリングに進む前に、スクリプトのダウンロード、解析、および実行を行う他のすべてのアクティビティを停止します。

2番目のケース(Googleのもの)では、スクリプト要素が動的に作成され、ファイルが非同期でロードされます。

最初のタグはブロックされていますが、2番目のタグはブロックされていません。

詳細async

「ブロック」スクリプトの影響の詳細:

概要:スクリプトがブロックされている場合は、ページの下部にスクリプトを配置します。

于 2012-08-27T15:29:15.253 に答える
0

一般的に、なし。

その特定のケースでは、GoogleはSSLバージョンを提供するために別のホスト名を使用しています。

HTTPバージョンとHTTPSバージョンに同じホスト名を使用した場合は、次を使用できます。

<script src="//example.com/ga.js" async></script>

…同じ効果のために。

asyncGoogleバージョン(2)にはあったが、(1)にはなかった属性の追加に注意してください。

于 2012-08-27T15:27:58.510 に答える