ホームページ > 記事 > ウェブフロントエンド > js_javascript スキルを非同期でロードする 4 つの方法についてコメントする

js_javascript スキルを非同期でロードする 4 つの方法についてコメントする

WBOYオリジナル: 2016-05-16 15:24:101211ブラウズ

js を非同期でロードする 4 つの方法、レビューが始まります。

オプション 1: $(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(document).ready(function() {
              alert("加载完成！");
            });
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

コメント:

1. jquery を引用する必要があります

2. すべてのブラウザと互換性があります。

オプション 2: タグの async="async" 属性

async (HTML5 の属性です) の定義と使い方

async 属性は、スクリプトが利用可能になると非同期で実行されることを指定します。

例:

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

コメント:

1. HTML5 の新しい属性は、Chrome、FF、IE9 および IE9+ でサポートされています (IE6 ～ 8 はサポートされていません)。さらに、このアプローチでは、スクリプトが順番に実行されることは保証されません。

2. async 属性は外部スクリプトにのみ適用されます (src 属性を使用する場合のみ)。

オプション 3: タグ

defer 属性は、ページが読み込まれるまでスクリプトの実行を延期するかどうかを指定します。

一部の JavaScript スクリプトは document.write メソッドを使用して現在のドキュメントコンテンツを作成しますが、他のスクリプトは使用しない場合があります。

スクリプトがドキュメントのコンテンツを変更しない場合は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに defer 属性を追加してドキュメントの処理を高速化できます。ブラウザは、スクリプトを実行しなくてもドキュメントの残りの部分を安全に読み取ることができることを知っているため、ドキュメントがユーザーに表示されるまでスクリプトの解釈を延期します。

例:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

コメント: すべてのブラウザと互換性があります。さらに、このアプローチにより、defer 属性を設定するすべてのスクリプトが順番に実行されることが保証されます。

オプション 4: 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの動的作成

例:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            (function(){
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                var tmp = document.getElementsByTagName('script')[0];
                tmp.parentNode.insertBefore(s, tmp);
            })();
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

コメント: すべてのブラウザと互換性があります。

上記は、js の非同期読み込みの 4 つの方法を区別して紹介したものであり、js の非同期読み込みを学習する皆さんに役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：オブジェクトに関する質問の落とし穴 Javascript オブジェクトの理解_Javascript スキル次の記事：オブジェクトに関する質問の落とし穴 Javascript オブジェクトの理解_Javascript スキル

続きを見る

js_javascript スキルを非同期でロードする 4 つの方法についてコメントする

関連記事