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

今日の 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() メソッドを使用することに加えて、<script> タグを作成し、XHR によって取得されたスクリプトをそこに挿入することもできます。 効果も同様です。 </script>

Iframe

短所: ドメインを越えることができない、オーバーヘッドが高い、元のページの JS を Iframe で直接使用することはできない

DOM に Iframe を挿入することで、Iframe 内のスクリプトが現在の DOM を操作できるようになりますページ。 親ページの DOM は、parent.document を通じて取得できます。

// JS in Iframevar doc = parent.document;doc.body.appendChild(xxx);

ブラウザの同一オリジン ポリシーでは、Iframe の JS がクロスドメインの親ページにアクセスすることも許可されていないため、このメソッドはクロスドメインできません。 同時に、ブラウザーは Iframe 用の DOM の完全なセットを作成してレンダリングする必要がありますが、これにはコストがかかります。

DOM 要素

利点: クロスドメイン可能

おそらく読者も考えたことがあるでしょう。<script> をページに直接挿入するだけで十分ではないでしょうか。 実際、ドメインを越えて実装できます。コードを見てください: </script>

var script = $('<script>', {src: '/path/to/sth.js'});$('head').append(script);

これは、より一般的なソリューションです。

遅延/非同期

利点: ページのレンダリングとスクリプトの実行のどちらを優先するかを柔軟に制御できます。

短所: Opera ブラウザはまだサポートされていません。

スクリプトの実行時に新しい <script> タグを挿入することでスクリプトの読み込みを遅らせることができるので、HTML を記述するときにこの <script> を遅らせるように指定できますか? 許可されています！ </script>

HTML の <script> タグには、遅延読み込みを宣言するために使用される 2 つの属性 (defer と async) があります。 このうち、async は HTML5 標準で提案されていますが、残念ながら、これら 2 つの属性はまだ Opera ではサポートされていません。 </script>

<script src="one.js" async></script>     <!--异步执行--><script src="one.js" defer></script>     <!--延迟执行--> 

2つの違いは何ですか?ご覧ください:

写真は Peter.sh から。

通常の実行

スクリプトのダウンロードと実行時にHTMLの解析が停止します

実行を延期します

スクリプトのダウンロード時にHTMLはまだ解析中であり、HTMLの解析が完了した後にスクリプトを実行します。実行を遅延してもレンダリングがブロックされないという追加の利点は、スクリプトの実行時にページのレンダリングがすでに終了していることです。

非同期実行

スクリプトのダウンロード中、HTML はまだ解析中です。ダウンロードが完了すると、HTML 解析は一時停止され、スクリプトがすぐに実行されます。