Menu
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:
761
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.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
