1

I've been reading some guides and results that google throws at me but I am still not sure how to go about to reduce the following changes to one single reflow.

var el1 = document.getElementById("one");
var el2 = document.getElementById("two");
var el3 = document.getElementById("three");
var variable1 = getSomeDynamicValue();

function doChanges() {
  el1.style.cssText = "width: " + variable1 + "px;";
  el2.style.cssText = "top:50px; left: 50px; position: fixed;";
  el3.style.cssText = "";
}

doChanges();

As I understand, cssText causes a reflow, so with this code there will be three reflows? Or does it depend on other circumstances?

Edit: The articles and similar post's don't really give a definitive answer to my question. Is it possible? Which is the method?

bewww
  • 39
  • 2
  • 6
  • 1
    Why not just `el1.style.width = "10px"`? – Radvylf Programs Oct 19 '19 at 23:30
  • These are merely examples to illustrate what type of changes I need to make. Having said that, declaring one property with cssText can be useful if there is a need to clear any other present inline styles on an element. – bewww Oct 20 '19 at 00:59
  • While changing the page generally causes reflows, they are usually deferred and collapsed into a single reflow after multiple things changed. Only rarely (if you properly avoid it), [reflows are forced to occur immediately](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) by code – Bergi Oct 20 '19 at 01:58

1 Answers1

1

According to this site:

Anything that changes input information used to construct the rendering tree can cause a repaint or a reflow, for example:

  • Adding, removing, updating DOM nodes
  • Hiding a DOM node with display: none (reflow and repaint) or visibility: hidden (repaint only, because no geometry changes)
  • Moving, animating a DOM node on the page
  • Adding a stylesheet, tweaking style properties
  • User action such as resizing the window, changing the font size, or (oh, OMG, no!) scrolling

At the bottom of the site it explains the best ways to avoid multiple reflows:

  • Don't change individual styles, one by one. Best for sanity and maintainability is to change the class names not the styles. But that assumes static styles. If the styles are dynamic, edit the cssTextproperty as opposed to touching the element and its style property for every little change.
  • Batch DOM changes and perform them "offline". Offline means not in the live DOM tree.
  • Don't ask for computed styles excessively. If you need to work with a computed value, take it once, cache to a local var and work with the local copy.

Please do read for yourself, they provide decent examples

dhuang
  • 909
  • 4
  • 18
  • "*Don't change individual styles*" and "*perform DOM changes offline*" have nothing to do with avoiding multiple reflows. – Bergi Oct 20 '19 at 02:00
  • While I agree that using classes is a best practice, the part on "*edit the `cssText` property*" seems to be rather antiquated. Using `style` properties is much more declarative and maintainable, and I doubt it makes a performance difference. From when is that article you cite? – Bergi Oct 20 '19 at 02:07
  • I do prefer using classes, but the problem is that I may need to use dynamic variables for some values. I should mention this in my example. – bewww Oct 20 '19 at 11:35
  • @Bergi seems like around late 2013 which seems outdated - though the question this is a duplicate of was answered in 2014.. – dhuang Oct 22 '19 at 03:51