Are there any performance issues when adding dynamic css with jQuery
I am creating a list page. In which about 20 records will be loaded on page load, and the rest will be dynamically added when scrolling down. In my application, I am using a generic layout that contains bootstrap styles. But for this particular page, I need to override some css. For example, I need to reduce the padding of a td element to 4px, which is 8px by default. I have two ways to do this, either add a new css file and conditionally include it in the header (the header is common to all pages), or add a script for that page. So I added a jquery script to achieve this, which is a simple solution without much code change.
$("td").css({'padding':'8px 2px'});
When I do this, I saw inline css being added to every td that is added to existing table rows. I just wanted to know if there are any performance issues or if it will affect load times if I do.
source to share
Styling though JavaScript has a cost. The price includes scripting time and recalculation of styles. While this cost is negligible if you are adding styles via js for only a few records (say 20), it gets expensive if you are trying to add the same thing for a large number of records (1000).
Since your use case is kind of bigger, you need to prepare for the worst.
So it is always better to add styling to css.
If you can't add the rule to the css file due to some limitation. You can create a dynamic stylesheet and add it to the body and use that class on a table cell that is still more efficient than $ .css ()
.padd-fix {
padding:8px 2px;
}
$('td').addClass('padd-fix');
source to share