ベストプラクティス: ノンブロッキングスクリプト Loading_html/css

今日の Web ページとスクリプトはますます複雑になり、ページのパフォーマンスが低下することがあります。これは、ネットワークまたはブラウザの問題として誤解されることがよくありますが、実際には、フロントエンドテクノロジがページのパフォーマンスに非常に大きな影響を与えます。ページのパフォーマンスに対するフロントエンドの影響も多面的です:

スクリプト/スタイルファイルの分割はブラウザのキャッシュ効率に影響します。
DOM 操作を頻繁に行うと、大量の CPU リソースが占有されます。
リソースリンクの順序もページのレンダリング速度に影響します。
同期ネットワークリクエストにより、ページが応答を停止する可能性があります。

この記事では、「ブラウザービジープロンプト」、「ページのレンダリングの停止」、「カーソルの応答の停止」など、さまざまなスクリプト読み込み方法がページのパフォーマンスに与える影響について調査します。最後に、ノンブロッキングスクリプト読み込みのベストプラクティスを示します。

スクリプトブロッキングとは何ですか

この記事のトピックはノンブロッキングスクリプト読み込みテクノロジです。では、スクリプトブロッキングとは何ですか?

記事「Web パフォーマンスの最適化: プリフェッチ、プリレンダリング」で説明したように、ブラウザーはリソースを取得すると、DNS 解決、接続の確立、ファイルのダウンロード、ページのレンダリングなどのプロセスを実行します。ブラウザは同時に 3 ～ 5 個のスクリプトのみをダウンロードし、それらを順番に実行します。そして、ダウンロードと実行のプロセス中に、ページのレンダリングと応答が停止します (つまり、ページのスタックと呼ばれます)。

最悪のパフォーマンス状況は、特定のスクリプトのダウンロードがタイムアウトになり、後続のスクリプトとスタイルが長時間ブロックされ、ブラウザーのアイコンが常にビジー状態になる場合です。このスクリプトが HTML HEAD タグ内にある場合、ブロック処理中にページ全体が空白になり、ユーザーエクスペリエンスが非常に低下します。

スクリプトのブロックを防ぐために、ブロックしないスクリプト読み込み方法を検討してみましょう。このスクリプトを次の方法で使用すると、ブラウザ (Chrome を例にします) にビジーインジケーターアイコンが表示されず、ページの応答が停止しません。

XHR

欠点: ドメインを越えることができず、簡単にハイジャックされます

XHR を使用して非同期ネットワークリクエストを実行できることはわかっています。XHR Eval メソッドの原理は、XHR を通じてスクリプト全体をダウンロードして実行することです。 eval() 関数を通じてこのスクリプトを実行します。

$.get('/path/to/sth.js')    .done(function(src){        eval(src);    });

ログイン後にコピー

XHR のダウンロードプロセスは非同期であるため、このプロセス中にブラウザアイコンに「ビジープロンプト」は表示されません。 JS の実行時間は非常に短く、ページが応答を停止することはないと考えられます。 XHR にはクロスドメインの問題があるため、この方法はリソースが同じドメイン名にある (または CORS 応答ヘッダーフィールドがオンになっている) 場合にのみ適用できます。

eval() メソッドは安全ではないことがわかっています。 eval() メソッドを使用することに加えて、

著者別の最新記事