0

複数の JSF ページを持つ JSF アプリケーションがあります。ページをクリックして新しいページをロードすると、1 ～ 2 秒待って新しいページがロードされ、白い画面が表示されます。この遅い読み込みを解決するにはどうすればよいですか? たとえば、新しいページが読み込まれている間、画面の中央に「読み込み中...」と表示し、白い表示を表示せずに画面を更新することはできますか? ベストプラクティスは何ですか?

4

1 に答える 1

6

パフォーマンスのデバッグに関する質問のようです。

遅いビットがどこにあるかを確認することから始めます。Chrome、Safari、または Firefox (場合によっては IE) では、デバッガー コンソールにアクセスできます。

Chrome で、これを引き上げて [ネットワーク] タブをクリックします。ページを更新。表示されるのは、読み込みにネットワーク接続が必要なページ上のすべてのリソースのウォーターフォール グラフです。また、それぞれの時間を提供します。

次のようなものが表示されたとします。

index.html ########
script1.js         ####
script2.js             ##########
img1.png                         #####
img2.png                         #########
img3.png                         ######

index.html を script2.js の最後まで見ると、これらが直線的に次々と発生する様子がわかります。これをブロッキングと呼びます。

index.html の場合、これが最初のページ読み込みです。ドキュメントのサイズに応じて、これは非常に小さい場合と非常に大きい場合があります。あとがきのほとんどすべて (script1 & 2 および imgs) は、index.html の読み込み後にのみ読み込みを開始します。これは、他のすべての読み込みを開始する前に、ブラウザーが index.html を解析する必要があるためです。

index.html の読み込みに約 2 秒かかる場合は、問題がサーバー側にある可能性が最も高いことを意味します。ページの生成に時間がかかっているか、Web サーバーの負荷が高いか、接続速度が非常に遅い可能性があります。この時点で、問題がどこにあるかを確認するためにサーバー側のテストを行う必要があります。

サンプルグラフに戻りましょう。

script1.js と script2.js がどのようにブロックされているかに関しては、すべての JavaScript がロード、解析、および実行されていることを意味します。Javascript はシングルスレッドであり、ブラウザーが次のスクリプトの処理を開始したり、次のリソースをロードしたりする前に、JavaScript インタープリターがスクリプト タグのコードを完全に解析してロードする必要があります。

JavaScript を最適化してすばやくロードする方法はたくさんあります。これは別のトピックですが、「javascript の読み込みを最適化する」をグーグルで検索することは、より多くのことを学び始めるのに適した場所です。

最後に、画像などの一部のタイプのリソースは、本質的に並行して読み込まれます。グラフが示しているのは、img1-3 がすべて同時に読み込まれていることです。これは、各リソース負荷の開始がすべて同じポイントに並んでいることによって示されます。img2 のように、同じポイントで終了する場合と終了しない場合があります。Img2 は画像が大きいため、読み込みに時間がかかりました。

ブラウザがリソースをロードする方法について知っておくと便利なことがもう 1 つあります。それは、ブラウザが確立できる同時接続数に制限があるということです。以前の IE6 では、ドメインあたりの同時接続は 2 つに制限されていました。そのグラフは次のようになります。

img1.png                         #####
img2.png                         #########
img3.png                         ######
img4.png                              ######

img4 の読み込みが開始される場所に注意してください。画像 1 ～ 3 は読み込み中ですが、画像 1 の読み込みが完了するまで画像 4 の読み込みが遅れました。これは、開いている接続が 2 つしかなく、img1 が終了するまで img4 を待たなければならなかったためです。繰り返しますが、img2 のサイズは重要ではありません。これは、利用可能な接続のみに基づいていました。

幸いなことに、最近はすべてのブラウザでより多くの同時接続が許可されているため、これはあまり問題になりません. それでも、それは知っておくべきことです。

この問題を回避する方法は、異なるドメインまたはサブドメインからリソースをロードすることです。たとえば、画像が非常に多いサイトを持っている場合、画像をロードできる複数のサブドメインをセットアップすることをお勧めします。次のようなものかもしれません：

sub1.domain.com/img1.png
sub1.domain.com/img2.png
sub3.domain.com/img3.png
sub4.domain.com/img4.png
sub1.domain.com/img5.png
sub2.domain.com/img6.png
sub2.domain.com/img7.png

これにより、ブラウザはリクエストを「ラウンドロビン」し、それほど長く待たずにより多くのリソースをロードできます。

とにかく、これが役立つことを願っています。

于 2012-10-14T00:14:37.453 に答える