Large number of HTML elements, Is there is any way to load the page faster?

[vsstephen]

Large number of HTML elements, Is there is any way to load the page faster?

I have a load page contains large number of html elements such as >150 forms and each forms having same name of elements but with different form names. E.g kindly please take a look over the attached html code. Since the requirement in such that I need to show all the 150 forms on one load. Also I try to use the yahoo YUI tab component, one tab contains 15 forms and the current screen is full already. I face a problem of very slow loading during initial load. Also I use ajax for server callings. So that I don’t have to redraw every time when I post something to the server. It works fine. Am looking a solution for initial load delay. Kindly please give me some tips over on this, how to overcome on this issue.

Thank you.

<DIV id = "divselectForm1" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm1">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
<TR>
<TD>
<INPUT type = radio Name=ts style="WIDTH: 10px" checked>
<INPUT name=COL1 maxLength=2 value=11 style="WIDTH: 15px; BACKGROUND-COLOR: #ccff99">
<SELECT NAME=COL2 style="WIDTH: 105px; COLOR:WHITE; BACKGROUND-COLOR: #3366CC" onchange="getagentids(this.form.name,'COL2');">
<OPTION selected VALUE="SELECT">SELECT</OPTION>
<OPTION VALUE="START" style="BACKGROUND-COLOR: lightgreen">START</OPTION>
</SELECT>
<INPUT name=COL3 maxLength=2 value=11 style="WIDTH: 15px; BACKGROUND-COLOR: #ffff99">
<INPUT type = radio Name=ts style="WIDTH: 10px">
<INPUT TYPE="button" value="M" style="WIDTH: 20px; HEIGHT: 22px" onclick="pageTypeone(this.form,'<M>');"></TD>
</TR>
<TR>
<TD><SELECT NAME=COL4 style="WIDTH: 85px; BACKGROUND-COLOR: #ccff99"><OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT>
<SELECT NAME=COL5 style="WIDTH: 85px; BACKGROUND-COLOR: #ffff99"><OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT></TD>
</TR>
<TR>
<TD>
<INPUT value=- style="FONT-WEIGHT: normal; WIDTH: 13px; HEIGHT: 22px" type=button size=5 width="20" onclick="scoreminus(this.form,this.form.COL6)"><INPUT name=COL6 readonly value=0 style="WIDTH: 18px; BACKGROUND-COLOR: #ccff99"><INPUT value=G1 style="WIDTH: 22px; HEIGHT: 22px" type=button onclick="scoreplus(this.form,this.form.COL6,'G1')">
<INPUT name=COL7 value="00:00" style="WIDTH: 35px; BACKGROUND-COLOR: yellow"><INPUT name=COL25 style="WIDTH: 25px"><INPUT TYPE="button" style="WIDTH: 20px; HEIGHT: 22px" onclick="Timer(this.form,'COL7');" value="...">
<INPUT type=button value=- style="WIDTH: 13px; HEIGHT: 22px" onclick="scoreminus(this.form,this.form.COL8)"><INPUT name=COL8 readonly value=0 style="WIDTH: 18px; BACKGROUND-COLOR: #ffff99"><INPUT type=button value=G2 style="WIDTH: 22px; HEIGHT: 22px" onclick="scoreplus(this.form,this.form.COL8,'G2')"></TD>
</TR>
<TR>
<TD><SELECT NAME=COL9 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL10 style="WIDTH: 30px"><SELECT NAME=COL11 style="WIDTH: 55px; BACKGROUND-COLOR: #ffff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL12 style="WIDTH: 45px">
<SELECT NAME=COL13 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL14 style="WIDTH: 30px"><INPUT name=COL15 value=',,,,' title="HALFTIME(A-B),FULLTIME(A-B),EXTRA TIME(A-B) AND PENALTY(A-B)" style="WIDTH: 100px"><INPUT name=COL16 style="VISIBILITY: hidden; WIDTH: 30px">
<SELECT NAME=COL17 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL18 style="WIDTH: 30px">
<INPUT name=COL19 style="WIDTH: 50px" onkeyup="return Upper(event,this);"><SELECT NAME=COL20 style="WIDTH: 45px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT>
<SELECT NAME=COL21 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">
<OPTION selected VALUE="SELECT">SELECT</OPTION><OPTION VALUE="ODDS/EVENT">ODDS/EVENT</OPTION>
</SELECT><INPUT name=COL22 style="WIDTH: 30px"><INPUT name=COL23 style="WIDTH: 30px">
<INPUT name=COL24 style="WIDTH: 30px"><INPUT type="checkbox" name="chkGroup" checked>
<INPUT type=hidden NAME=REFERENCE VALUE="S.B1" style="WIDTH: 30px">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
<DIV id = "divselectForm2" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm2">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
//same elements like the above form 1
</TABLE>
</FORM>
</DIV>
<DIV id = "divselectForm3" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm3">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
//same elements like the above form 1
</TABLE>
</FORM>
</DIV>
<DIV id = "divselectForm4" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
<FORM NAME="selectForm4">
<TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>
//same elements like the above form 1
</TABLE>
</FORM>
</DIV>
.
.
.
.
<DIV id = "divselectForm151" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">
</DIV>

[A1ien51]

Why would you have that many forms? Sounds like the design needs to be rethought. :)

Eric

[rnd me]

a few suggestions:

providing stricter code to the browser would almost certainly reduce parsing time...

using lower-case tags, quoted attribs, a doctype, and not using tables would also speed things up.

if you must use tables, give each one a height and width, to cut down on redraws.
without a pre-known height+width, the entire page is reflowed to fill a single cell...

in fact, in general, the more things you pre-size, the faster the page can render.

you could also move the style attribs to css classes, where they can be pre-parsed once, instead of once for each element...

[bdl]

Please don't double post, you're wasting people's time by posting in two different forums.

http://www.codingforums.com/showthread.php?t=163916

Mods, please merge these threads.