jsを非同期でロードするにはどうすればよいですか? jsを非同期で読み込む方法の紹介-jsチュートリアル-php.cn

jsを非同期でロードするにはどうすればよいですか? jsを非同期で読み込む方法の紹介

青灯夜游

リリース： 2019-01-05 10:33:36

転載

3075 人が閲覧しました

jsを非同期でロードするにはどうすればよいですか?この記事では、js を非同期で読み込む 3 つの方法を紹介します。必要な方は参考にしていただければ幸いです。 [ビデオチュートリアルの推奨: JavaScript ビデオチュートリアル]

js 読み込みタイムライン:

js に基づいて生成されます。ブラウザが実行する一連の動作をその瞬間から順番に記録し、読み込みシーケンス、最適化に使用できるもの、理論的根拠を記述し、それを記憶します。

1、ドキュメントオブジェクトを作成します。 Web ページの解析を開始します。 HTML 要素とそのテキストコンテンツを解析した後、Element オブジェクトと Text ノードをドキュメントに追加します。この段階では document.readyState = 'loading' です。 (ドキュメントオブジェクトが生成され、ドキュメントのステータスビットがロードに変わります)

2 リンク外部 CSS が見つかった場合は、ロードするスレッドを作成し、ドキュメントの解析を続けます。

3、外部 JS のスクリプトが発生し、非同期または遅延が設定されていない場合、ブラウザーはロードしてブロックし、JS がロードされるのを待ってスクリプトを実行してから続行します。文書を解析します。

4。スクリプト外部 JS に遭遇し、非同期と遅延を設定すると、ブラウザーはロードするスレッドを作成し、ドキュメントの解析を続けます。非同期属性を持つスクリプトの場合、スクリプトがロードされた直後に実行されます。 (document.write() を非同期で使用することは禁止されています)

document.write(): 内容を HTML ドキュメントとして扱い、ページに出力します。ドキュメント全体がほぼ解析されているとき、document.write() を使用すると、以前のドキュメントストリームがすべてクリアされ、その中のドキュメントストリームが代わりに使用されます。

例: 全体ページには a のみが表示されます。ここの document.write(); にはドキュメントフローを排除する機能があり、スクリプトも排除されます。

<p style="height:100px;width:100px;background-color:red;"></p>

ログイン後にコピー

<script type="text/javascript">
    window.onload = function(){
        document.write(&#39;a&#39;);
    }
</script>

ログイン後にコピー

5 img などに遭遇した場合、まず dom 構造を通常どおり解析し、次にブラウザは src を非同期でロードしてドキュメントの解析を続けます。

6。ドキュメントの解析が完了すると、document.readyState = 'interactive' になります。

最初に解析し、次にロードし、ステータスビットがインタラクティブ (アクティブ) に変わります。

ステータスビットの遷移を確認します:

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}

ログイン後にコピー

7 ドキュメントの解析が完了すると、defer で設定されたすべてのスクリプトが順番に実行されます。 (これは非同期とは異なりますが、(document.write());

8 の使用も禁止されていることに注意してください。 document オブジェクトは DOMContentLoaded イベントをトリガーし、これにより、同期スクリプト実行フェーズからプログラム実行フェーズに移行します。

例 1: 出力と完了を同時に行うと、onDOMContentLoaded しか使用できません。 addEventListener にバインドされている場合に使用されます。

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}
document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;a&#39;);
},false)

ログイン後にコピー

例 2: window.onload と次の例の違い

$(document).ready(function(){
    //当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
    /*它的原理就是interactive和DOMContentLoaded事件*/
})

ログイン後にコピー

違いは次のとおりです: window.onload は必要に応じてロードされます。、ただし、解析された後に操作できます (これは jQuery メソッドです)

例 3: 上記のスクリプトを配置するときは、次のように記述するのが最善です。onload は書かず、onload は決して書かないでください。ただし、最良の方法は、以下に記述することです。

<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <script type="text/javascript">
        document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
            var p = document.getElementsByTagName(&#39;p&#39;)[0];
            console.log(p);
        },false)
    </script>
    script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完

ログイン後にコピー

9 すべての非同期スクリプトが読み込まれて実行され、img などが読み込まれた後、 document.readyState = 'complete

10 ここからは、ユーザー入力やネットワークイベントなどを非同期応答方式で処理します。概要は 3 つです。ポイント: まず、ドキュメントオブジェクトが生成されます。これは、js を実行できることを意味します。2 番目のステップでは、ドキュメントが解析され、3 番目のステップでは、ドキュメントがロードされて実行されます。

js を非同期的に読み込む 3 つの方法を見てみましょう:

js を非同期的に読み込む方法:

1)、async HTML5 属性。JavaScript コードを非同期でロードできるようにします

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

ログイン後にコピー

2) defer は古いバージョンの IE

<script type="text/javascript" defer="defer"></script>

ログイン後にコピー

3) スクリプトタグを動的に作成します (h5 との互換性の問題を解決できます)

<script type="text/javascript">
            function asyncLoaded(url,callback){
                var script = document.createElement("script");
//                script.src = url;   假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
                if(script.readyState){
                    script.onreadystatechange = function(){
                        if(script.readyState == "complete" || script.readyState =="loaded"){
//                            执行某个函数
                            callback()
                        }
                    }
                }else{
                    script.onload = function(){
//                        执行某个函数
                        callback()
                    }
                }
                script.src = url;    //异步的过程
                document.head.appendChild(script)    
            }
            asyncLoaded("05.js",function(){
                fn()　　　　　　　　　　//05.js中的函数
            })
        </script>

ログイン後にコピー

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。！！

以上がjsを非同期でロードするにはどうすればよいですか? jsを非同期で読み込む方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。