CODEWITHSUNDEEP
htmlcss
Andrew Butler
Andrew Butler

Reputation: 1060

High CPU usage with css

I have an issue with my CSS solution that I had came up with. I have a list with 3000 rows or so and they each have the following css applied to each row:

.row .title,
.row .description {
    position: relative;
    overflow:hidden;
    white-space: nowrap;
    background-color: inherit;
}

.row .title:after,
.row .description:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));           
}

Here is a sample row:

<tr class="row"><td class="title">really long test data string</td><td class="description">Test description</td></tr>

Basically what I am trying to do is fade out the text when the window is smaller than the table width. The problem is that I am always having high CPU usage when scrolling through the table, so it's non-responsive almost all the time. I realized it was this snippet of CSS that was causing this, but does anyone know of a way to make this work without causing high CPU usage. Maybe I am approaching this situation wrong? Anyone have any thoughts?

thanks!

Upvotes: 2

Views: 1161

Answers (2)

Luca
Luca

Reputation: 9725

change your selectors to something more specific, e.g.:

.rowtitle,
.rowdescription {
    position: relative;
    overflow:hidden;
    white-space: nowrap;
    background-color: inherit;
}

or direct descendant if it suits your markup:

.row > .title,
.row > .description { 
    position: relative;
    overflow:hidden;
    white-space: nowrap;
    background-color: inherit;
}

cascading selectors are more expensive because the browser traverses the DOM right to left when interpreting a css selector.

you can measure your css selectors performance with Chrome dev tools, "Profiles" and use the "Collect CSS Selector Profile".

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Try using .row>.title and .row>.description - the > combinator is more efficient than the [space] combinator, because it only has to travel one level of the hierarchy instead of all of them.

Normally this won't make much difference, but with 3,000 rows it could.

Also, consider adding table-layout: fixed to your table. You may need to add some HTML:

<table style="table-layout:fixed">
    <colgroup>
        <col style="width: 50px" />
        <col style="width: 250px" />
    </colgroup>
    <tbody>
        <tr>...</tr>
        ...
    </tbody>
</table>

This will allow the browser rendering engine to fix the table layout rather than making it dynamic based on the content - this will add up to a massive improvement for your huge table.

Upvotes: 2

Related Questions