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

vsstephen · 04-15-2009, 02:46 AM

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 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.

Code:

<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>

drhowarddrfine · 04-15-2009, 03:33 AM

Don't know why you need that many forms and all those inputs. Looks like a user interface problem more than anything else. Even with all that, it shouldn't take that long to load but I don't see the complete form either.

I would say, quit using tables for layout and that would speed things up but not as much as someone rethinking all that input. And that's not bringing up all the invalid markup either.

yankthemeggs · 04-15-2009, 03:40 AM

Im trying to find a html code that will play video in order one after the other.
windows media player im making a internet movie...lol

yankthemeggs · 04-15-2009, 05:40 AM

when your adding an object like windows media player and a flash object at the same time , doesnt seem to pick up both like old explorer6

mikemacx · 04-15-2009, 05:46 AM

I notice you also repeat the same styling elements over and over. It's time to use CSS as a way of minimizing the formatting. Give it a look and see what you think. It can greatly speed up your loading time.

bdl · 04-15-2009, 06:10 AM

I'm with mikemacx, look at getting rid of the TABLE layout and instead use the CSS box model. In addition, one of the more important things you can do is to remove all the inline stuff (styles and JavaScript / event handlers) and push them to out to external files, encapsulating everything into functions, especially any repeated code. Any DOM code can and should be loaded at the very bottom of your document body, just prior to your closing tag (linked-in stylesheets should remain in the document head - use the LINK tag to pull in CSS instead of @import). CSS and JS can be compressed.

There is a really good article on the Yahoo! Developer site titled "best practices for speeding up your website". I've put some of those into action and made big improvements in page loads.

websteralex · 04-15-2009, 07:16 AM

i notice that you are using forms for what it looks wired and also you should use CSS.

vsstephen · 04-15-2009, 10:21 AM

Kindly pls take a look at this screen, This is the actual loading page.

Following link is the loading page
http://www.i-message.com.my/fb8888/result.php

Following is the full set of html code
http://www.i-message.com.my/fb8888/forForum.txt

VIPStephan · 04-15-2009, 12:16 PM

OK, you should definitely move your JS and CSS into external files. While I’m not at all sure what your page is about it seems like the forms do have their purpose so there’s not much optimization in terms of form markup. You should, however, scrap the tables and use more semantic HTML because except of the stats table at the bottom that’s not what tables are meant for.

Also if all the forms have the same markup and just a different name you couls use a PHP loop to generate the same HTML over and over again and just have the name as variable. This wouldn’t make less code for the browser but it might be easier for you to maintain since you only have to change one time in order to change all forms.

A few suggestions for cleaner code:

Use a proper doctype. Yours is incomplete and will throw IE into quirks mode. Also for IE the doctype must be on the very first line, no white space, character, or empty line should be before it. I strongly recommend HTML or XHTML strict.
Write all HTML lowercase.
Always wrap the attribute values with quotes like <select name="selectName">
The name attribute is deprecated for all elements (this includes the form element) except form controls. So you should replace the form name attributes with ID attributes. JS can pick them up like forms[‘form1'].