JavaScriptは非同期でロードできますか?-フロントエンドQ&A-php.cn

JavaScriptは非同期でロードできますか?

WBOY

リリース： 2022-03-10 15:51:21

オリジナル

1529 人が閲覧しました

JavaScript は非同期でロードできます。非同期読み込みとは、JavaScript のダウンロードと実行中にブラウザが後続のページの処理を継続することを意味します。これにより、スクリプトファイルの読み込みが最適化され、ページの読み込み速度が向上します。各ブラウザでスクリプトファイルを解析するための異なるメカニズムが関与するため、より多くの用途に使用できます。非同期読み込み。

JavaScriptは非同期でロードできますか?

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript は非同期で読み込むことができますか

#1. まず、非同期と同期とは何かを理解する必要があります

同期読み込み: 同期モードもブロッキングモードとして知られるこのモードは、ブラウザーの後続の処理を妨げ、後続の解析を停止するため、後続のファイル (画像など) の読み込み、レンダリング、およびコードの実行が停止します。

非同期読み込み: 非同期読み込みはノンブロッキングとも呼ばれ、ブラウザは js のダウンロードと実行中に後続のページの処理を続行します。

平易な言葉で言うと、同期とは、あなたが私に夕食に行くように頼んだ場合、あなたの声が聞こえれば一緒に食事に行きますが、聞こえなければあなたは私に電話をかけ続けることを意味しますあなたの話を聞いたと言うまでは、私も一緒に行きます。食事をしてください。

非同期とは、あなたが私に電話してから、自分で食事に行くことを意味します。知らせを受けたらすぐに帰ることもあれば、仕事が終わってから食事をすることもあります。そのため、食事をご馳走してほしい場合は同期方式、食事をご馳走してほしい場合は非同期方式を使うと節約できます。

2. スクリプトファイルの読み込みを最適化し、ページの読み込み速度を向上させるために、非同期

を使用する必要があるのはなぜですか? ページの読み込み速度を向上させることは常に非常に重要です。スピード。各ブラウザにはスクリプトファイルを解析するためのメカニズムが異なり、スクリプトを読み込むと他のリソースやファイルの読み込みがブロックされるため、非同期読み込みがより一般的に使用されます。

3. 非同期の使用方法

編集者は、非同期読み込みを使用するには 3 つの方法があると考えています。

async, ロード後に実行, 外部スクリプトのみロード可能, script タグ内に js は記述できません.

//1.async  只能加载外部脚本
<script src="js/index.js" async="async"></script>

ログイン後にコピー

defer は非同期ロードされますが、dom ドキュメントがロードされるまでロードされません完全に解析され、実装されます。内部および外部 js を使用できるのは IE のみです。

//2.defer  只能IE使用，文档解析完成以后才会去执行
<script src="js/index.js" defer="defer"></script>

ログイン後にコピー

ロードオンデマンド、ブラウザ互換性を考慮してください

//3.按需求加载，考虑浏览器兼容
    function loadScript(url,callback){
            var script = document.createElement("script");
            
            if(script.readyState){  IE浏览器兼容
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readState == "loaded"){
                        callback()
                    }
                }
            }else{         大部分浏览器兼容
                script.onload = function(){  
                    callback()
                }
            }
            script.src = url;
            document.head.appendChild(script)
        }
        loadScript("08.js",function(){
            test()
        })
//外部js
function test(){
    console.log("hello world")
}

ログイン後にコピー

js ロードタイムライン

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

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

3. 外部 js スクリプトが検出され、async と defer が設定されていない場合、ブラウザーはロードしてブロックし、js がロードされるのを待ってスクリプトを実行し、その後ドキュメントの解析を続けます。

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

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

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

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

8. document オブジェクトは DOMContentLoaded イベントをトリガーし、これはプログラム実行の同期からの変換もマークします。スクリプト実行ステージからイベント駆動ステージまで。

9. すべての非同期スクリプトがロードおよび実行され、img などがロードされると、document.readyState = 'complete' になり、window オブジェクトがロードイベントをトリガーします。

10. 今後、ユーザー入力、ネットワークイベントなどが非同期応答方式で処理されます。