非同期スクリプト読み込みテクニック

多くの Web アプリケーションは、拡張機能を提供するために複数のスクリプトと CSS ファイルの読み込みに依存しています。ただし、同期読み込みではページのレンダリングが大幅に遅くなる可能性があります。この問題に対処するために、これらのリソースを非同期でロードするためのいくつかの方法が存在します。

非同期属性を使用したスクリプトのロード

1 つの方法は、スクリプト タグで async 属性を使用することです:

この属性は、他のリソースの読み込みをブロックせずにスクリプトを実行できることをブラウザーに通知します。ただし、依存関係のあるスクリプトを非同期でロードすると、依然として問題が発生する可能性があることに注意することが重要です。

カスタム関数の使用

この例では、importScripts() というカスタム関数を使用して複数のスクリプトをロードしています。スクリプトとスタイルシートを非同期的に処理します。ただし、このコードには、ページがインタラクティブになる前にすべてのリソースがロードされていることを確認するコールバック メカニズムがありません。

JQuery の $.getScript メソッドの使用

JQuery の $.getScript() メソッドは、簡潔なメソッドを提供します。スクリプトをロードする方法非同期:

$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);

このメソッドは、ロードされたスクリプトとオプションのコールバック関数を提供します。

Promise-Based Loading

現代向けブラウザでは、Promise オブジェクトを使用して、コールバック ハンドラーを受け入れる非同期読み込み関数を作成できます。

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}

この関数を使用すると、読み込みの成功および失敗のシナリオを処理できます。

考慮事項

予期しない動作を避けるために、スクリプトとスタイルシートが正しい順序で読み込まれるようにすることが重要です。 。さらに、リソースを非同期でロードすることは、ページのパフォーマンスを最適化するための主要な方法であってはなりません。縮小、圧縮、リクエスト数の削減などの手法も考慮する必要があります。