I've recently been developing an application using tables with a large number (hundreds) of rows. The rows contain tabular data and each row contains two drop down lists as well as link which displays hidden table rows directly below it.
I am currently experiencing lengthy delays when attempting to select a value from the drop down, and when displaying the hidden table rows.
Is the table the source of my problem here?
From what I gather, HTML tables can be appear to be slow to render if widths are not explicitly stated. If they aren't, the browser has to finish loading the contents of the cells before it can calculate the correct widths.
MSDN has some information here on their "Building High Performance HTML Pages" article that may help; they suggest the following (regarding tables specifically):
Set the table-layout CSS attribute to fixed on the table.
Explicitly define col objects for each column.
Set the WIDTH attribute on each col.
The problem is more than likely the rendering of the controls (100 select boxes) rather than the table layout. How many items are there in the drop down list? Does it perform the same way in all browsers on different operating systems?
Sorry to be so vague but generally tables aren't slow to render, but are looked down upon because of their lack of accessibility (although of course much of the idealism is the fact screen readers don't like them).
I can state from experience that it's almost certainly the dropdown lists that are causing the slowness. Tables with hundreds of rows can render almost instantaneously if they only contain text, but add a dropdown list to each row with just a few dozen options, and now even 50 rows will take a noticeable amount of time.
Try to design around the need for dropdowns in the table rows - if this is a form (and why else would you have dropdowns?), have the user select the row they wish to edit, and then put the editable controls only in that row, either via AJAX if you're into that sort of thing, or a more traditional "detail view" approach.
I've not noticed any slowdowns when displaying static tables with a few thousand entries, but adding effects like sorting or dynamic zebra-striping can quickly bog down even a modern browser on a fast computer. Make sure you're not running any JavaScript iterations across the entire table.
Whatever you come up with, test the approach in a couple of browsers on a couple of platforms, with some slower machines. I once had an app that was speedy everywhere except in Safari for Macintosh. It turned out to be something about the way it rendered the dropdowns. There's just no substitute for experimentation. Uhm, I meant testing.
If you know how wide each column should be, try specifying table-layout: fixed in the CSS for the table and see if that makes any difference (it should stop the browser trying to re-render the whole table just because you've toggled visibility on a few rows.)
IE does not handle very large DOMs manipulations well at all.
If you have two selects in each of the rows and a link, and let's assume each select has 5 options that's (((5options + 1select) * 2) + 1 link + 3tds + 1tr) at least 17 DOM items per row. Plus, if I'm not mistaken, ie treats each text item as it's own DOM node. So add another 10 DOM nodes for the drop down text and 1 for the link, that's 28 DOM items per row.
I agree with the others that it's not only your table that is causing the slow loading but the population of the dropdown list as well.
If it helps you can try paginating your table. You can use JavaScript frameworks such as jQuery or extjs for pagination and AJAX.
Related
When ever the row number of the lists are high (what I mean is sometimes even only 170-200 rows), on scroll down/up, DataTable refreshes itself somehow and all the custom css, click functions and events are being removed. Moreover the list is sometimes freezing or scrollbar is getting stuck at the bottom.
If I dont use DataTable.groupByColumn(5000) the performance and css is better but I still loose click events on the table.
The reason why I use DataTable.groupByColumn() with an extreme number is the row style. As default the background color of rows are black and white, it is not easy to read and confusing. But anyhow even if I don't use groupByColumn() I am loosing onClick functions when I scroll down on high row number lists...
Is there a way to avoid this 'refresh' or is there an optimal row number to keep in mind when we make development on DataTable ?
As an example I've created 285 row list with random strings to check if the problem is arising from our data structure but unfortunately same problem occurs in example too.
Do we have the chance to optimize it ?
EDIT
I have realized that DataTable uses 'clusterize.js', that's why I have used event delegation instead of giving functions to each row but this time all functions are working delayed depending on the length of the list.
Anybody has any idea ?
As you've found yourself, the DataTable is just a simple wrapper for the Clusterize.js library. Any potential optimizations would therefore have to be discussed with the library's community.
I have created a wholesale order form in the form of a large HTML table with lots of number inputs. I've noticed that switching between number inputs and typing values in the inputs are very slow in this table (ie. when I click in an input, it takes time for the cursor to show up; when I type in an input, it takes time for the character to show up). Is there any way for me to remove the lag without paginating the table rows?
You can view and play around with the table here (use guest password "braese").
A screenshot of a Chrome Dev Tools performance recording for clicking inside a single input (I'm not really sure what to make of this):
I did some more digging and testing, and it turns out the lag (update layer tree) when clicking/typing in inputs is only an issue in Chrome. This answer on another question points to issues with Chrome since version 46. It's a shame that such a popular browser has allowed an issue like this to go on for 2+ years. We will have to paginate our order form since Chrome is so popular with our client's customers.
Wow my chrome almost crashed :)
It is your styles
You are causing layer creation every time you apply translate transform
Check out the Layers menu in Chrome Dev tools;
Test if it runs better - only table :)
Also order your styles and scripts! - first styles after that scripts
Cheers!
We're building a web application that has a page where the user sees a large table of editable items. This table has controls on each row to move the row up/down and the option to delete the row. Each row also has two select elements.
This table could consist of around 200 rows in extreme circumstances, it is when we have lots of rows that we run into severe performance problems. The page is incredibly slow to scroll up and down and we see "checker-boxing" on the screen, also deleting a row takes around 30 seconds, sometimes more! Moving up and down takes a similar amount of time, and the page is generally unusable.
We've been trying to narrow down exactly what the problem is and we're pretty sure it is to do with the select elements in the table - if we remove these from the rows; scrolling is perfect, moving up and down is ~1 second and deleting a row ~7 seconds.
If we delete a row from the bottom of the 200 row table, it is near instant.
It seems like the problem is to do with the CSS on the page, when we run the profiler it is the re-calculating of styles that is taking around 3 seconds.
The page performs fine in other browsers, any help/knowledge would be great.
Thanks
We have several tables in our Web App for iOS 6, some of which contains several hundreds of rows as read-only with just text, but some contains SELECT elements as well.
Setting the table-layout to fixed had a tremendous impact on the performance. Some of the larger tables had major rendering problems with the default dynamic table width calculation, which we didnt overcome so far. This was especially the case when a row contained checkboxes.
Some tables didnt render the last line for example, or the table was cut off anywhere near the bottom, and so on.
We use a special stylesheet for the portrait mode, which changes the width of the TABLE and TD elements and which completely removes some of the columns as well.
This works really fine and had caused no side effects or problems so far.
For scrolling, we use a special DIV element surrounding the table which has a defined height and is using "-webkit-overflow-scrolling: touch". Even the largest table with around 850 entries scrolls without any loss of performance or flickering.
When do you render the table? During the page rendering/ ready/ load Event?
Do you use an "innerHTML" assignment or do you create the DOM tree in the logic?
Setting table-layout:fixed; as a style property on the table (in your stylesheet) might make it more respond faster. The browser has to do less calculations, downside is you have to specify column widths yourself.
im making a memberlist for my website, we got 500+ members and want them on 1 page. we used tables before but this makes many dom elements and firefox says it gets slow.
is there a way to make a list with 3/4 colums with css to avoid the nr. of dom elementst?
greets. stefan
In cases like this, the best way to display 500 elements is with Javascript. Having 500 records as JSON is not that big of a memory hog, totally acceptable. You'd have to make a dynamically updating table that takes the records from memory and displays only 40 rows at a time. You could also implement search etc in JS to make it more user friendly.
I have an html table that literally has like 30 columns of data, and I'm having a hard time framing it in such a way that it can be visible without massive left/right scrolling.
One thing I was wondering is if anyone has ever seen anything clever with column headers? Some of them just can't be abbreviated down enough, but the column header is something like "Interview" and the value is numeric (lots of wasted space for the header alone). Granted, I could try and name these columns like INT or whatever, but there are lots of similarly named columns that it could become confusing.
Maybe some sort of auto collapsing columns based on mouse movement? Not sure.. I just need some creative suggestions on how to display this data!
Most likely the user will have a devil of a time comprehending 30 columns of data, regardless of scrolling.
I would recommend showing the most fundamental columns (things like name, description, identifying numbers -- core stuff, hopefully there are only 10 of them or less), and then letting the user toggle on or off whatever columns they need. A bit like google squared.
Use Jquery and CSS to accomplish this in a clean fashion. There may also be Javascript UI libraries that do this for you (Jquery UI, YUI, others...)
create images for the column names and rotate the text in the image 90 degrees. you can then have a long name with equally small widths.
Josh
I agree with the answer from ferocious, toggling columns is a good idea. Also, depending on the data, I would recommend only having a few columns displayed, and when the user clicks on the row they are interested in, it moves to a new page dedicated to the data in that record. This will work for some types of data and not for others