非同期スクリプト読み込み技術を使用してページの読み込み速度を向上するにはどうすればよいでしょうか?-jsチュートリアル-php.cn

非同期スクリプト読み込み技術を使用してページの読み込み速度を向上するにはどうすればよいでしょうか?

DDD

リリース： 2024-10-27 04:13:02

オリジナル

488 人が閲覧しました

How Can We Improve Page Load Speed with Asynchronous Script Loading Techniques?

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

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

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

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

<code class="html"><script async src="js/jquery-ui-1.8.16.custom.min.js"></script></code>

ログイン後にコピー

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

カスタム関数の使用

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

JQuery の $.getScript メソッドを使用する

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

<code class="js">$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);</code>

ログイン後にコピー

このメソッドは、ロードされたスクリプトの実行を自動的に処理し、オプションのコールバック関数を提供します。

プロミスベースのロード

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

<code class="js">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);
    });
}</code>

ログイン後にコピー

この関数により、成功した読み込みシナリオと失敗した読み込みシナリオの処理が可能になります。