How can I optimize the following JavaScript which sets the CSS properties of Elements

Question

I have a page with JavaScript which takes a very long time to run. I have profiled the code using Firefox and following is the output.

As you can see I have moved the time consuming lines to a method _doStuff, which seems to do a lot of Graphic related things. Following is the content of the _doStuff method.

  _doStuff:function(tds,colHeaderTds,mainAreaTds ){
       for (i = 1; i < tds.length; i++) {
            if (colHeaderTds[i].offsetWidth <= tds[i].offsetWidth) {
              colHeaderTds[i].style.width = tds[i].offsetWidth + "px";
            }
            mainAreaTds[i].style.width = colHeaderTds[i].offsetWidth + "px";
          }

  },

I am assuming that the time consuming Graphics sections are due to setting the widths of the elements. Is this observation correct? And how should I go about optimizing the code so that it would take less time to load the page?

Sergei Panfilov · Accepted Answer · 2016-03-03 13:07:42Z

1

Every iteration of your loop JS changes your DOM tree and forces browser to repaint it.

The good practice is to make a copy of your element, modify it in the loop, and after loop change the .innerHTML of the former element.

More reading about repaints on the topic here

answered Mar 3, 2016 at 13:07

Sergei Panfilov

1,21110 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How can I optimize the following JavaScript which sets the CSS properties of Elements

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