Web Analytics Made Easy -
StatCounter Large number of HTML elements, Is there is any way to load the page faster? - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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.

    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>

  • #2
    Why would you have that many forms? Sounds like the design needs to be rethought.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

    Comment


    • #3
      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...
      Last edited by rnd me; Apr 15, 2009, 01:26 AM.
      Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

      Comment


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

        http://www.codingforum.net/showthread.php?t=163916

        Mods, please merge these threads.

        Comment

        Working...
        X