Prevent the browser from rendering a CSS change in javascript?

Question

I have the following block of code that I need to complete as quickly as possible:

//someSpans is an array of spans, with each span containing two child spans inside of it
$.each( someSpans, function (i, span) {
    //Get the span widths, then add them to the style to make them permanent
    var aSpan = span.children[0];
    var bSpan = span.children[1];
    span.style.width = (aSpan.offsetWidth + bSpan.offsetWidth) + 'px';
    aSpan.style.width = aSpan.offsetWidth + 'px';
    bSpan.style.width = bSpan.offsetWidth + 'px';
});

If someSpans is an array that contains 1000 objects, this loop presented above will cause 3000 browser redraws, even though nothing on screen is actually changing, since the new "width" attributes in the style match the existing "auto" width. Is there a way to prevent the browser from redrawing the CSS until the loop is finished? I feel like this will greatly reduce the time it takes for the loop to complete.

I feel like requestAnimationFrame might be the key to doing what I'm looking for, but maybe I'm off base.

Answer 1

While the comments of why make a great point, here's a little better answer.

Part of your problem here is the alternating reads/writes from the style. Namely, setting span.style.width has now made aSpan.offsetWidth "dirty" and the CSS must be rendered. However, consider this:

var aWidth = aSpan.offsetWidth;
var bWidth = bSpan.offsetWidth;
span.style.width = (aWidth + bWidth) + 'px';
aSpan.style.width = aWidth + 'px';
bSpan.style.width = bWidth + 'px';

The rendering is now cut down to once per loop. More specifically, it's in reading offsetWidth on the next iteration that causes the render.

Exercise: While it can make code a little more obtuse, sometimes unnecessarily so, I have sometimes written code like this to loop twice. The first time collects the operations into an array, and the second loop is able to combine all the "setting" operations without accessing any layout values.

MSDN has some great documents on JavaScript performance with the most applicable here being "Managing layout efficiently"