Solved

HTML Table (Huge) Loading time

Posted on 2002-03-24
23
211 Views
Last Modified: 2012-05-04
I have a 2.5 Meg Html file that takes about a minute to render.  Most of it is a single HTML table.

Are there any "slick" tricks or things I could do to make it faster?  All users are using IE

I know I could break it into multiple tables, but then I lose the column alignment and borders, so I'd prefer a different solution.
0
Comment
Question by:gmoriak
  • 5
  • 4
  • 3
  • +6
23 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 6893187
tweaking html is possible, please give a link to the page.
but 2.5m isn't that HUGE, my 56k modem will take 10 minutes to load. phew!

lexxwern
0
 
LVL 3

Expert Comment

by:ibo
ID: 6893209
to speed up loading time,
* reduce unnecessary formatting tags or better yet, use inline cascading style sheet to define formatting. (reduces the size of your file).
* avoid nested tables and complicated tables.
* specify table sizes, dimensions etc so that browser will know immediately how to construct the tables.
* minimize javascript because it slows rendering of html tables.
* specify dimensions for images.
* if you have big images, slice them into parts.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6893241
well does all of this account for 2.5m~

what have you done on your page,

lexxwern
0
 
LVL 30

Expert Comment

by:third
ID: 6893250
i can't imagine what's inside of that page. is it a book, a photo album, or something?

yah, give us a link so that we can see what would be best.

;-)
0
 
LVL 3

Expert Comment

by:ibo
ID: 6893256
maybe its a thumbnails for his porn collections arranged in tables hehe :) jk!
0
 
LVL 30

Expert Comment

by:third
ID: 6893261
lol@ibo ;-) ur a filipino also?? i'm surprised! ;-)
0
 
LVL 3

Expert Comment

by:ibo
ID: 6893270
OT:
hey third.. whats up? :) yes i am. location mo?
0
 
LVL 30

Expert Comment

by:third
ID: 6893298
ibo,

   we would be messing this thread if we will be discussing it here. you can contact me at
third@third.itgo.com. btw, im from ortigas.

gmorjak & other Experts,
  sorry for the little mess.
 
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6893417
if it is one table it'll show it whenever it isdone loading/. No way around that. One thing you can do is get rid of all spaces. Other methods can also be used depending on your data structure inside your HTML. is there any logic to be found in the data that is written? If so you can use XML to retrieve the data and dynamically writing it out (for example).

CJ
0
 
LVL 17

Expert Comment

by:dorward
ID: 6893519
If you are using nested tables for layout you might like to link about moving to CSS for layout (which is what CSS was designed for) and using tables only for tabulated data (which is what tables were designed for).

CSS tutorial: http://www.westciv.com/style_master/academy/css_tutorial/

Examples: http://www.glish.com/css/

CSS Specification: http://www.w3c.org/TR/1998/REC-CSS2-19980512/
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
ID: 6893874
I cannot imagine any user finding the load time for a 2.5 meg page acceptable.  

It does not matter what optimization you use, you are transporting too much.

Re-design it, or live with the complaints.  If I was the sysadmin, I would be raising hell about the amount of bandwidth you are using.

Cd&
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 22

Expert Comment

by:CJ_S
ID: 6893881
You're not cd& ;-)
0
 
LVL 3

Author Comment

by:gmoriak
ID: 6894043
It's a local network app and my first suggestion was to filter the result set.  They said they need all the rows.  

Playing with spaces etc. might improve it somewhat but likely not worth the trouble.

It's one table with a couple thousand rows of data.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6894072
I realized it had to be a local app, that was why I made the sysadmin comment.  If several user start to pull that down at the same time, it is going to seriously degrade network performance. I would try to find a way to break it up.  My experience has been that even if you tell them during development that it is going to be slow, they will still complain and open problem tickets about the slow response time.

Users always think they have to have _all_ the data.

Cd&
0
 
LVL 30

Expert Comment

by:third
ID: 6895437
in designing a system, we have lots of considerations to be aware of. one big concern is how will the new system help the old process? what steps should be made in order to attain efficient system? and after this, what would be the most appropriate TOOL to be used in creating the system?

we all know web-based systems are not designed to handle HUGE data. this causes lots of network traffic that's why if the system cannot get rid of databases, FILTERING is applied just maintain good system performance. although some aspects are being sacrificed such as instant availability of all the data, this way the system comes out to be more useful to users. imagine if search engines like yahoo or google lists 1,000 links on a single page, would that be useful if you'll gonna wait for about 10 minutes waiting for the whole page to load. and then browse each link finding for the exact answer, huh that would bring a big HEADACHE...

now, what i'm tellin' here is you need to decide what would best fit the process. implement a web-based system but with limitations (ie. you need to filter the data) or if filtering cannot be avoided and you need a much faster data process, use the basic - a database application.

hope this helps...


0
 
LVL 3

Expert Comment

by:ibo
ID: 6895802
maybe HTML is not the answer.. XML would not be the advisable too.. how about compressed data file? ;)
obvious solution :
delimited plain text file -> compress ---> network -------> decompress -> parse/tokenize plain text file.
0
 
LVL 3

Expert Comment

by:ibo
ID: 6895804
if it has to be viewed only by a browser, generate the resultset in xml format and and use xsl to format the data. it reduces the size but not much.
0
 
LVL 3

Author Comment

by:gmoriak
ID: 6896662
This question took a wrong turn.  There are no concerns about bandwidth.  Even opening the html file from a local disk takes a long time to render and puts the CPU at 100% for 10 seconds or so.

My question was options to speed the time to render the HTML, not how to deliver a smaller file.  Also, I'm not interested in 5-10 percent gains by tweaking this or that.  Anything that is too slow, is also too slow running 10% faster.

0
 
LVL 5

Expert Comment

by:nfroio
ID: 6897237
gmoriak, i think your best bet is to post your code, let the experts take a look at it, and then proceed from there, everything else is pure speculation on what would solve your issues...

0
 
LVL 3

Author Comment

by:gmoriak
ID: 6897273
The code is a html page with a single table, no nesting.  The table has about 30 columns and several thousand rows.  The table takes about a long time to display.  

I was looking for ways to make IE display a table faster.  I appreciate the comments about requirements, yada, yada, yada, but those issues are understood.

I'll wait a bit for responses, if none, I'll give the points to Cobol for his answer that it can't be done.


0
 
LVL 5

Expert Comment

by:nfroio
ID: 6897424
so, you are saying that you have this as code:

<table> attributes whatever

<tr>
<td>
whatever
</td>

<td>
whatever>
</td>

add about 28 table data cols.

</tr>

x a thousand or so more table rows

</table>

if, so, then, well, you are just stuck with how it loads, and should prolly accept Cd&'s answer, as you are just limited with HTML if you insist on not going that direction... have you not looked into using Excel or something along those lines, or a .ASP dB pass.... with data that resides server side...

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6897719
Sorry we couldn't find some trick to make it quicker. Thanks for the A. :^)

Cd&
0
 

Expert Comment

by:micsca
ID: 10661894
There is way to speed up the load time. The majority of the load time spent because the browser has to read the entire table before it renders because it needs to figure out how wide to make columns. If you make the table a fixed-width, you will cut the load time in halve, and the transfer spped of the users internet connection will be the limiting speed.

You need to manually set your column width and the table width.
This code varies the table width based on the number of columns (ColCnt)

vTableWidth = cStr( 30 + (ColCnt * 10)) & "%"  ' Increase 10% for each column
Response.Write "<Table cellspacing=0 style='TABLE-LAYOUT:fixed;' width='" & vTableWidth & "'>

The table will also start to display right away, so it appears to the user that the load is faster


0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now