Is there any performance issues in adding dynamic css with jQuery

Question

I am creating a listing page. In which some 20 records will be loaded on the page load and the remaining will be added dynamically on scrolling down. In my application I am using a common layout which contains bootstrap styles. But for this particular page I need to override some css. For example I need to reduce the padding of td element to 4 px which is 8px by default. I have two ways to do this, either add a new css file and conditionally include in the header (header is common to all pages) or add a script for this page. So I added jquery script to achieve this which is the easy solution without much code change.

$("td").css({'padding':'8px 2px'});

When I do this, I saw the inline css is getting added to each td which is appending to the existing table rows. I just wanted to know is there any performance issues or will it affect the loading time if I do like this.

Apart from the fact that you load JQuery instead of using pure js there should be none — Vivick
– Vivick, Commented Jun 16, 2017 at 6:06
why not target the particular table in css like this .page-table td { padding: 8px 2px;}. all you need is a class name to that table — karthick
– karthick, Commented Jun 16, 2017 at 6:09
Adding a particular class is fine, but the problem is to add a new css, i need to add a new folder, new file (because we are following some standards as per the framework we are using) so I am trying to avoid that by adding the css in script. There is already a script in the page I am modifying — Vineesh
– Vineesh, Commented Jun 16, 2017 at 6:13
it will be lot easier to include the rule in existing css. but that's upto you — karthick
– karthick, Commented Jun 16, 2017 at 6:15

karthick · Accepted Answer · 2017-06-16 06:55:09Z

2

Adding styles though JavaScript has a cost. The cost includes scripting time and recalculating styles. While this cost is negligible if you are adding styles through js only for few records (lets say 20), but it becomes costly if you are trying to add the same for large number of records (1000).

Since your use case is of type view more, you have to prepare for the worst.

So it's always better to add the style in css.

If you are not able to add the rule in css file because of some restrictions. You can create a dynamic style sheet and add that to the body and use that class to the table cell, which will still be more efficient than $.css()

.padd-fix {
 padding:8px 2px;
}

$('td').addClass('padd-fix');

edited Jun 16, 2017 at 6:55

answered Jun 16, 2017 at 6:40

karthick

12.2k7 gold badges61 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there any performance issues in adding dynamic css with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related