ASP プログラマーであれば、Web アプリケーションのパフォーマンスを向上させることが重要であることに疑問の余地はありません。プログラムの実行を高速化するために、データベースまたは COM コンポーネントの最適化に忙しいかもしれません。ここまでの作業をすべて行った場合、ブラウザーで最終的に生成される HTML コードの表示速度を高速化してパフォーマンスを向上させることを考えたことはありますか?エンドユーザーにとって、ページの表示が早くなれば、より多くの賞賛を得ることができます。
ブラウザでの HTML の表示速度の向上は、あまり知られていないいくつかのテクニックによって実現できます。
1. テーブルのネストを使用しますか?
ページ内に複雑な構造を確立するには、通常、ページ上に HTML テーブルを配置します。次のようなページを作成する場合: このページには、上部のナビゲーション バー、左側のナビゲーション バー、右側のコンテンツ領域があります。これは、2 行 2 列の大きなテーブルを使用して作成できます。最初の行で 2 つの列を結合し、上部のナビゲーション バーを挿入します。 2 行目の左側の列に、ナビゲーション ボタンを表示するテーブルを挿入します。右側の列に、実際のコンテンツを表示するテーブルを配置します。 (図 1 を参照) このようなネストされたテーブルによって生成されるコードは次のとおりです:
<TABLE BORDER="0">
<TR>
<TD COLSPAN="2"><!-- 上部ナビゲーション バーのコンテンツ --></TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- 左側のナビゲーション バーのコンテンツ --></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- ページ本文のコンテンツ --></TD>
</TR>
</TABLE>
ただし、実際には、ブラウザが <TABLE> タグを見つけても、対応する終了タグ </TABLE> が見つからない限り、ページはすぐには画面に表示されません。したがって、ページ全体がテーブル内にある場合は、最後の </TABLE> が受信されるまで何も表示されません。このように、ファイル全体がダウンロードされるまで、ページはユーザーに表示されません。ページ データの量が比較的大きい場合 (検索エンジンの検索結果など)、この機能により一時的な停止が発生します。この状況を防ぐために、制作中にページを多数の小さなテーブルに分割することができます。各 <TABLE> から対応する </TABLE> までの HTML コードがダウンロードされると、ブラウザーに表示されます。訪問者の観点から見ると、ページは部分的に徐々に表示され、画面上にどんどん表示されます。このようなページは、ファイル全体をダウンロードして再度表示するよりも表示速度が速いように感じます。
この原則に従って、前の例を検討すると、ページ内の大きなテーブル全体が 3 つの個別のテーブルに分割される必要があります。最初のテーブルを使用して上部のナビゲーション バーを表示し、すべてのコンテンツを保持できる大きさになるように幅を調整し、<TABLE></TABLE> ブロックで完成させます。ページの下半分に左から2番目の表が並んでいます。 3 番目のテーブルを使用して実際のコンテンツを保持します。 (図 2 を参照) 各部分は完全なテーブルであるため、コードの各部分はダウンロード後すぐに表示されます。こうすることで、上部と左側のナビゲーション バーがページの残りの部分よりも目立つようになります。ユーザーは、この時点でページのダウンロードが開始され、すぐに画面に表示されると想像します。これは、ユーザーが空白の画面を長時間見続けるよりもはるかに優れています。
変更されたコードは次のとおりです:
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP"><!-- 上部ナビゲーション バーのコンテンツ --></TD>
</TR>
</テーブル>
<TABLE BORDER="0" ALIGN="LEFT">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- 左側のナビゲーション バーのコンテンツ --></TD>
</TR>
</テーブル>
<TABLE BORDER="0">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- ページ本文のコンテンツ --></TD>
</TR>
</TABLE>
2. 他のタグも忘れずに閉じてください。
上記の例では、<TABLE> タグを先に閉じるだけで、ブラウザでのページの表示が速くなります。類推すると、同じ特性を持つ類似したタグがいくつかあります。
たとえば、リスト ボックスとコンボ ボックスには <OPTION> タグを生成し、リスト項目には <LI> タグを生成します。通常、ASP プログラマーはデータベースにアクセスし、<OPTION> を使用して作成されたリスト ボックスまたはコンボ ボックスにデータを送信します。このとき、コード内に終了タグを記述することで、ページの表示を高速化することもできます。ブラウザで。
次のようなコードは使用しないでください:
Do while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") &_""">"& _objRS("製品名")
objRS.MoveNext
Loop
Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
このようなコードを使用するには:
Do while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("ProductName") & "</OPTION>"
objRS.MoveNext
Loop
Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
次のようなコードは使用しないでください:
<UL>
<LI>リンゴ
<LI>オレンジ
<LI>バナナ
</UL>
次のようなコードを使用します:
<UL>
<LI>リンゴ</LI>
<LI>オレンジ</LI>
<LI>バナナ</LI>
</UL>
さて、見てみましょう。ブラウザでのページの表示は速くなりましたか?
ASP アプリケーションのパフォーマンス向上におけるこれらの変更の重要性を過小評価しないでください。おそらく、「ヒントとヒント」タイプの書籍やオンライン資料には、プログラムの実行を高速化するための HTML コードの最適化についての言及はほとんどありません。ただし、これらのテクノロジを実際に適用すると、プログラムのパフォーマンスを大幅に向上させることができます。