画面読込速度の改善ついて（ボタンクリックでのフォーム（TABLE）増機能追加に伴うDB検索が原因と考えています）

前提・実現したいこと

ボタンクリック時にフォーム（TABLE）を増減させたい。
データ登録・編集画面を作成しておりますが、場合によって個数を変動させる必要があります。
最大個数を２０個とし、画面読込時に20個分のTABLEを作成し非表示としており、
ボタンクリック時に非表示から表示へ1個ずつ切り替えていくという仕組みにしております。
しかし、現状の作りでは、最初の画面読込に時間が掛かってしまいます。（数秒から１０秒程度）
おそらく、最初の画面読込時に行っているASPでのORACLEデータ読込が20回繰り返されていることが原因だと思うのですが、
解決に辿り付けず、質問させて頂きます。

該当のソースコード

HTML
1<!--1個目のTABLE（必ず表示）-->
2<TABLE>
3<TR>
4　<TH>番号</TH><!--入力された番号を元にデータベース検索、Hitした値を自動入力-->
5　<TD><INPUT TYPE=TEXT ID=Num1 name=Num1 onblur=Read(1)></TD>
6</TR>
7<%
8'性別
9S_Sex1= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'性別
10S_Sex2= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'性別
11
12'DB OPEN
13（省略）
14'DB 検索
15strSQLU = ""
16strSQLU = strSQLU & " SELECT コード , 名称	"
17strSQLU = strSQLU & " FROM 性別マスタ		"
18strSQLU = strSQLU & " ORDER BY 表示順		"
19Set oraDsU = -----
20'性別プルダウンの中身生成
21Do While Not oraDsU.Eof
22　If S_Sex(1) = oraDsU("コード") Then
23　　S_Sex1_Combo = S_Sex1_Combo	& "<OPTION value='"&oraDsU("コード")&"' selected>"& oraDsU("名称") & "</OPTION>"
24　Else
25　　S_Sex1_Combo = S_Sex1_Combo	& "<OPTION value='"&oraDsU("コード")&"'>"& oraDsU("名称") & "</OPTION>"
26　End If
27　If S_Sex(1) = oraDsU("コード") Then
28　　S_Sex2_Combo = S_Sex2_Combo & "<OPTION value='"&oraDsU("コード")&"' selected>"& oraDsU("名称") & "</OPTION>"
29　Else
30　　S_Sex2_Combo = S_Sex2_Combo & "<OPTION value='"&oraDsU("コード")&"'>"& oraDsU("名称") & "</OPTION>"
31　End If
32oraDsU.dbMoveNext
33Loop
34
35'氏名
36S_Name1= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'氏名
37S_Name2= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'氏名
38
39'DB OPEN
40（省略）
41'DB 検索
42strSQLE = ""
43strSQLE = strSQLE & " SELECT コード , 名称	"
44strSQLE = strSQLE & " FROM 氏名マスタ		"
45strSQLE = strSQLE & " ORDER BY 表示順		"
46Set oraDsE = -----
47'氏名プルダウンの中身生成
48Do While Not oraDsE.Eof
49　If S_Name(1) = oraDsE("コード") Then
50　　S_Name1_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"' selected>"& oraDsE("名称") & "</OPTION>"
51　Else
52　　S_Name1_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"'>"& oraDsE("名称") & "</OPTION>"
53　End If
54　If S_Name(1) = oraDsE("コード") Then
55　　S_Name2_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"' selected>"& oraDsE("名称") & "</OPTION>"
56　Else
57　　S_Name2_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"'>"& oraDsE("名称") & "</OPTION>"
58　End If
59oraDsE.dbMoveNext
60Loop
61%>
62<TR>
63<!--上記記載のORACLE SQLでの読込データよりプルダウン作成（性別選択内容に従い氏名の選択可能項目変動）-->
64　<TH>責任者：性別/氏名</TH>
65　<TD>
66　　　<SELECT class="parent" ID='S_Sex1' name="S_Sex1"><%=SEX1_Combo%></SELECT>
67　　　<SELECT class="children" ID='S_Name1' name="S_Name1"><%=Name1_Combo%></SELECT>
68　</TD>
69</TR>
70<TR>
71　<TH>担当者：性別/氏名</TH>
72　<TD>
73　　　<SELECT class="parent" ID='T_Sex1' name="T_Sex1"><%=Sex2_Combo%></SELECT>
74　　　<SELECT class="children" ID='T_Name1' name="T_Name1"><%=Name2_Combo%></SELECT>
75　</TD>
76</TR>
77</TABLE>
78
79
80<!--2個目から20個目までのTABLE（ボタンクリックで表示切替）-->
81<%
82a = 1　　'現在の表示TABLE数を変数aへ代入
83
84For i = 2 To 20
85　If i <= a Then
86　　Disp = "inline"
87　Else
88　　Disp = "none"
89　End If
90%>
91<TABLE id=tablecount<%=i%> style=display:<%=Disp%>;><!--上記If文に従い表示設定-->
92<TR>
93　<TH>番号</TH><!--入力された番号を元にデータベース検索、Hitした値を自動入力-->
94　<TD><INPUT TYPE=TEXT ID="Num<%=i%>" name="Num<%=i%>" onblur=Read(1)></TD>
95</TR>
96<%
97'性別
98S_Sex1= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'性別
99S_Sex2= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'性別
100
101'DB OPEN
102（省略）
103'DB 検索
104strSQLU = ""
105strSQLU = strSQLU & " SELECT コード , 名称	"
106strSQLU = strSQLU & " FROM 性別マスタ		"
107strSQLU = strSQLU & " ORDER BY 表示順		"
108Set oraDsU = -----
109'性別プルダウンの中身生成
110Do While Not oraDsU.Eof
111　If S_Sex(i) = oraDsU("コード") Then
112　　S_Sex1_Combo = S_Sex1_Combo　&　"<OPTION value='"&oraDsU("コード")&"' selected>"& oraDsU("名称") & "</OPTION>"
113　Else
114　　S_Sex1_Combo = S_Sex1_Combo　&　"<OPTION value='"&oraDsU("コード")&"'>"& oraDsU("名称") & "</OPTION>"
115　End If
116　If S_Sex(1) = oraDsU("コード") Then
117　　S_Sex2_Combo = S_Sex2_Combo　&　"<OPTION value='"&oraDsU("コード")&"' selected>"& oraDsU("名称") & "</OPTION>"
118　Else
119　　S_Sex2_Combo = S_Sex2_Combo　&　"<OPTION value='"&oraDsU("コード")&"'>"& oraDsU("名称") & "</OPTION>"
120　End If
121oraDsU.dbMoveNext
122Loop
123
124'氏名
125S_Name1= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'氏名
126S_Name2= "<OPTION value='' class='msg'>　　　　　　　　　　</OPTION>"'氏名
127
128'DB OPEN
129（省略）
130'DB 検索
131strSQLE = ""
132strSQLE = strSQLE & " SELECT コード , 名称	"
133strSQLE = strSQLE & " FROM 氏名マスタ		"
134strSQLE = strSQLE & " ORDER BY 表示順		"
135Set oraDsE = -----
136'氏名プルダウンの中身生成
137Do While Not oraDsE.Eof
138　If S_Name(i) = oraDsE("コード") Then
139　　S_Name1_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"' selected>"& oraDsE("名称") & "</OPTION>"
140　Else
141　　S_Name1_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"'>"& oraDsE("名称") & "</OPTION>"
142　End If
143　If S_Name(i) = oraDsE("コード") Then
144　　S_Name2_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"' selected>"& oraDsE("名称") & "</OPTION>"
145　Else
146　　S_Name2_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"'>"& oraDsE("名称") & "</OPTION>"
147　End If
148oraDsE.dbMoveNext
149Loop
150%>
151<TR>
152　<TH>責任者：性別/氏名</TH>
153　<TD>
154　　　<SELECT class="parent" ID='S_Sex<%=i%>' name="S_Sex<%=i%>"><%=SEX1_Combo%></SELECT>
155　　　<SELECT class="children" ID='S_Name<%=i%>' name="S_Name<%=i%>"><%=Name1_Combo%></SELECT>
156　</TD>
157</TR>
158<TR>
159　<TH>担当者：性別/氏名</TH>
160　<TD>
161　　　<SELECT class="parent" ID='T_Sex<%=i%>' name="T_Sex<%=i%>"><%=Sex2_Combo%></SELECT>
162　　　<SELECT class="children" ID='T_Name<%=i%>' name="T_Name<%=i%>"><%=Name2_Combo%></SELECT>
163　</TD>
164</TR>
165</TABLE>
166<% Next %>
167
168<!--クリックにて2個目以降のTABLE表示切替-->
169<TABLE>
170<TR>
171　<TD><INPUT TYPE=BUTTON VALUE=追加 onclick=Display()></TD>
172　<INPUT type='hidden' name='count' value="<%=a%>">
173　<INPUT type='hidden' name='ref' value="1">
174</TR>
175</TABLE>
176<!--表示TABLE数-->
177<INPUT type='hidden' name='count' value="<%=a%>">

JavaScript
1function Display(){
2　i = document.MAIN.count.value;
3　//新規TABLE追加表示
4　if(document.MAIN.count.value<20){
5　　document.MAIN.count.value = new Number(document.MAIN.count.value) + 1;
6　　i = document.MAIN.count.value;
7　　document.getElementById("tablecount" +i).style.display="inline";
8　　document.getElementById("1" +i).style.display="inline";
9　} else {
10　　document.MAIN.count.value = 20;
11　　alert("追加上限（20件）となります");
12　}
13}

試したこと

上記HTML「2個目から20個目のTABLE」内に記載されているDB検索部分がLoop内に含まれていることで、
画面読込時に20回検索され、結果的に読込速度に影響が出ているのだと考え削除するも、
2個目のTABLE以降には表示されず、1個目のTABLEで生成したプルダウンを引用するとTABLE毎に選択することできませんでした。
（全て同じ値となってしまう）

補足

IE11利用です。ソースが長いため一部抜粋としております。
記載はしておりませんが、前画面から持ってきた変数が有る場合はそれを、無い場合でも入力された「番号」を元にデータ検索を行い、
Hitした値を各項目にセットしており、本画面で入力された内容は次画面にてデータ書き込みとしております。
この都合上、画面構成は同じですがセットされる値は別物と出来るよう、上記のように作っております。

要領を得ない長文での質問となり申し訳ございませんが、宜しくお願い致します。

補足２

皆様からの回答を元に再度上記「試したこと」に記載の部分を考えなおしてみました。
ソース記載の下記部分をLoop外で行い、

'DB 検索
strSQLE = ""
strSQLE = strSQLE & " SELECT コード , 名称	"
strSQLE = strSQLE & " FROM 氏名マスタ		"
strSQLE = strSQLE & " ORDER BY 表示順		"
Set oraDsE = -----

Loop内では下記のプルダウン用Comboへの代入のみとしました。

'氏名プルダウンの中身生成
Do While Not oraDsE.Eof
　If S_Name(i) = oraDsE("コード") Then
　　S_Name1_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"' selected>"& oraDsE("名称") & "</OPTION>"
　Else
　　S_Name1_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"'>"& oraDsE("名称") & "</OPTION>"
　End If
　If S_Name(i) = oraDsE("コード") Then
　　S_Name2_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"' selected>"& oraDsE("名称") & "</OPTION>"
　Else
　　S_Name2_Combo = S_Name2_Combo　&　"<OPTION value='"&oraDsE("コード")&"'>"& oraDsE("名称") & "</OPTION>"
　End If
oraDsE.dbMoveNext
Loop

このLoop内で読み込んだ際に最後のデータまで読み切ってしまっていた事で、2個目のプルダウンで値が入ってこなかったのではないかと思われます。
ものすごい初歩的な質問となりますが、

Do While Not oraDsE.Eof

oraDsE.dbMoveNext
Loop

上記の形で一度読み切ったDBデータは2回目から読みこまないのでしょうか・・・
2回目からも読めるのであれば、Loop内のDB検索をLoop外に出してプルダウン用ComboのみLoopで繰り替えすという対応策がとれるのですが。
お恥ずかしい内容で申し訳ありません。もし見当違いでしたらご指摘下さい（汗

x_x

2020/02/03 01:18

マスタを LEFT JOIN せずに毎回検索しているということですかね？そうであれば SQL の問題なので、「JavaScript」「HTML」「jQuery」タグを外して「SQL」タグを追加してください。

Program_

2020/02/03 09:22

マスタ検索をFor Loop(VBScript)で何度も繰り返してしまっている事が原因と認識しております。ご指摘ありがとうございます。タグへSQLを追加させて頂きます。

行動規範の内容に同意します

回答2件

同じ項目を20個作るんですよね？
必要なデータはループ外で取得して変数に突っ込んどけばいいのでは

1個目のTABLEで生成したプルダウンを引用するとTABLE毎に選択することできませんでした。

上記はnameもコピーしちゃっていませんか？
どういう実装なのかわかりませんが、ループの外でDB検索を行うのは正しいです

投稿2020/02/02 19:03

CaptainRTA

総合スコア136

Program_

2020/02/03 09:18

ご回答ありがとうございます。提案頂いた通り【必要なデータはループ外で取得して変数に突っ込んどけばいいのでは】という点もダメでした。その際にはご指摘の通り、ループ外でDB検索を行い、Loop内で回すHTML要素にはNAME・ID共に変数を付随させて同じにならないようにしています。

行動規範の内容に同意します

ベストアンサー

当てずっぽうですが、1つ懸念があるのでそれを記載します。
CSSのtable-layoutを特に指定していなければ、fixedに設定してください。

HTMLのレンダリングエンジンのテーブルは、
デフォルトでは中の項目の文字数に従って「良い感じに横幅を整えよう」という挙動です。
これが超高コストで、大量に描画すると画面が固まる大惨事になります。

fixedは「そんな機能要らん」と等間隔にぶった切るレイアウト指定方法です。
1行目の横幅が明示されていれば愚直に従うので、
th { width: 200px; }みたいな指定もして上げれば最低ラインの画面に仕上がるはずです。

【追記】

既に全てのテーブルにfixedを設定済み

そうだったんですね……
では素直に切り込みましょうか。

おそらく、最初の画面読込時に行っているASPでのORACLEデータ読込が20回繰り返されていることが原因だと思うのです

このレベルでは仮説です。
仮説自体はとても大事で、この部分の直感が外している事は比較的少なくバカにできません。

仮説が正しいか否かの裏取り調査はしましたか？
もししていないなら単なる戯言ですよ！
すぐに問題を切り分けていきましょう。

まずはcurlコマンドやブラウザのネットワークタブ、GETリクエストを発射するアプリなんかを用意してください。
HTMLファイルを受け取るまでにまず何秒掛かっているかをミリ秒レベルで計測出来るはずです。
もしHTMLファイルを受け取るまでに3秒を超えるレベルなら明らかに遅すぎです。
ここまで調査して、ようやく仮説が正しいという可能性が高くなります。

しかし20回繰り返されていることが原因とは到底思えません。
普通1回のselect文の問い合わせは数十ミリ秒で帰ってきますよ？どんだけサーバーボロいねん。
(ゆくゆくの事を考えるとあまり良くはないので要修正といった感じではあります)

インデックスの張り忘れとかを疑った方が良いと思います。
SQLクライアントを立ち上げて、データベースに問い合わせているSQLを実際に投げてみてください。
MySQLなら実行計画を確認するExplainという命令が存在し、インデックスをちゃんと使っているか否かが一目で分かるようになってます。
http://labs.opentone.co.jp/?p=1985

とまぁ、こんな感じですね。
現場の状況が見えないので月並みな回答しか出来ませんが、頑張ってください。

投稿2020/02/03 09:57

編集2020/02/04 02:18

miyabi-sun

総合スコア21158

Program_

2020/02/03 11:08

ご回答ありがとうございます。全TABLEにてfixedを設定しており、TABLE幅に関してはCOLGROUPにて設定しております。ただ、fixedの具体的な意味は曖昧で毎回コピペしてただけですので、非常にタメになりました！ありがとうございます。

Program_

2020/02/04 04:30

追加回答ありがとうございます。調査の結果、Loopの中で都度リセットしていた事が原因と判明しました。完全に私の初歩的なミス（見落とし）でした（汗ご提示頂いた内容で念のため確認し、SQLなども問題無い事を確認しついでに一部修正しておきました。今まで行っていなかった点（インデックスの確認など）についても勉強になりましたので今回BAとさせて頂きます。なお、HTML読込までの秒数は6秒以上かかっておりました。。。使えたものでは無かったので、通常に戻りましたので人安心。細かい部分まで丁寧にありがとうございました！！！

行動規範の内容に同意します

あなたの回答