Optimizing HTML tables?
css, html, performance
Solution
Sooooo, I tried using the different tabs in the Chrome Developer Tools and ran an Audit (if it's possible to say it that way). It stated that 98% of `foundation.min.css` was unused, so I got rid of the include in my `<head>`.
And that did it! Since I wasn't really using anything from Foundation at all I simply removed it and the CSS hovers are now instant like they should be.
Problem
I have quite a large HTML table (2000+ rows) and I'm noticing that the hovers I use seem really unresponsive (take about 1 second to trigger). ``` #songs tbody tr:hover td { color: #1abc9c; } ``` I need the table to be loaded with all elements in the DOM. They don't have to be visible per se, so lazy loading is an option but when a user scrolls quite a bit to the bottom he will still run into the problem. Is there any way to optimize HTML (tables), and what are things I should look out for? EDIT I decided to try it out in other browsers and Firefox doesn't seem to have any problem at all, and neither does IE10. So it's a problem I only have in Chrome. ``` <tr data-playlist="/edm" data-filename="Chuckie - Together (Original Mix).mp3" class="song match"> <td>Together (Original Mix)</td> <td>Chuckie</td> </tr> ``` Also note that it's not about the page load, it loads in under a second. The problem is the CSS `.song:hover` in Chrome. EDIT 2: Performance testing with the Chrome developer tools So I decided to take a look into the Developer tools for debugging this problem. The Profiles tab didn't get me much further, but when I tried the Timeline events I found out the following happens when I hover over a row: