0

パフォーマンスを向上させるために、ログイン ページで 1.2 MB のレガシー JavaScript ライブラリをプリフェッチしたいと考えています。このライブラリは、ユーザーがログインした後にのみ必要です。WebPageTest は、Chrome がダウンロード後にファイルを処理するのに約 700 ミリ秒の CPU を必要とすることを示しています。ユーザーのブラウザにファイルをキャッシュすることはできますが、JavaScript を実行/解析することはできませんか?

私の理想の流れ：

  • ログインページを読み込む
  • script タグ のasyncおよび属性を使用して js ライブラリを非同期ロードするdefer
    • 解析しません。ユーザーがログインするまで、ライブラリは実際には使用されません。
  • ユーザーのログイン
  • ユーザーのホームページを読み込み、キャッシュから js ライブラリを読み込み (存在する場合、そうでない場合はサーバーから取得 - 非同期ではありません)、解析します
    • ここでは 700 ミリ秒の解析時間のみを支払いたい

スクリプト属性の「タイプ」をに変更する可能性を調べましたtext/plainが、これは不可能のようです。これがうまくいったとしても、私にはある種のeval悪に直面するように思えます.

なぜ私はこのようにしたいのですか？ユーザーが資格情報を入力している間、ブラウザーが基本的にアイドル状態になる小さな時間枠があります。その時間を使ってこの大きなライブラリをダウンロードし、次のページの読み込みを有利に進めたいと考えています。バックグラウンドでファイルをダウンロードすることでブラウザのキャッシュを潤すことができますが、ブラウザがライブラリを受信して​​ファイルを解析/実行した後、CPU で 700 ミリ秒のスパイクが発生します。ログイン ページでのこの CPU スパイクを回避したいと考えています。

この WPT スクリーン キャップの右下に CPU スパイクが見られます。 ここに画像の説明を入力

4

1 に答える 1

1

使用してみてくださいXMLHttpRequest：

var req = new XMLHttpRequest();
req.open("GET", "/path/to/your/script.js");
req.send(); // This line fetches the file

このファイルの内容で何かをしたい場合は、次の行req.onloadの前に設定します。.send()

var req = new XMLHttpRequest();
req.open("GET", "/path/to/your/script.js");
req.onload = function()
{
    console.log(this.response);
}
req.send(); // This line fetches the file

最後に、サーバー側で、ファイルがキャッシュ可能であることを確認します。

于 2015-01-23T21:02:19.517 に答える