I have a web application that needs to display many, many lines and cells of information.
Due the requirements of the humans viewing the information I’m unable to paginate or tabulate the data to reduce the number of rows or cells.
A page contains roughly around 700 rows and each row has about 15 cells containing information.
When the web app was built it was back in the fairly HTML-only era. I’ve always thought the page loads and renders slowly. The page often takes about 8 seconds when returning one of the largest sets of information.
Today I tried to streamline it. My own intuition and friends advice said to use CSS tables instead.
This would mean converting all <table> <tr> and <td> tags to <div> tags with…
.tbl {
display: table;
width: 100%;
table-layout: fixed;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
height: 300px;
}
I put about an hour of work into adding a second test page to generate the same information in this kind of style:
<div class="tbl"> <div class="row"> <div class="cell">c</div> <div class="cell">b</div> <div class="cell">a</div> </div> <div class="row"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div> </div>
What amazed me is the performance improvement (or lack thereof!).
Here were my results with my test page:
Firefox:
Tables: ~5 seconds
CSS Tables: ~5 seconds
Internet Explorer 11:
Tables: 4.8 seconds
CSS Tables: 4.8 seconds
Chrome:
Tables: 5 seconds
CSS Tables: 5 seconds.
Firstly, it made absolutely no difference to the loading time. I’m not an expert at reading the performance metrics that the browsers show but it seems to shift some of the delay into a different section rather than redrawing and style calculations.
Secondly, Internet Explorer 11, in this case, is just that bit quicker than the other browsers. Pretty impressive for such an awful bit of junk.
Newer pages that I create I expect I will still use the CSS code just because it is newer and probably going to be more manageable in the future. One thing stopping me using it for the new test page that I created is the seeming lack of rowspan and colspan in the CSS table options. If I wanted a “Total:” line to span the entire set of columns it seems that it isn’t possible in CSS alone.
Hope this post helps someone else before they spend a lot of time re-writing a table page into CSS to try and improve performance. If anyone else has any experience to post, please comment on this page.
thecomputerperson 