4

So if we have a div that is not visible though different situation, z-index, opacity,parent's overflow:hidden and relatively/absolute positioning etc...

Is it necessary or just better to set display:none to that div ? I could imagine browser will skip display:none div while it will have to do some calculation otherwise for same result.

I'm asking this because I'm working on animations and setting display:none require a callback when animation is completed meaning css3 transition should be avoid. (I know some browser offers a way to get callback from css3 transition but not enough 'universal' for me.)

Another way of saying it would be :

Is it faster to reflow/repaint div with display:none rather than with width:0;height:0, left:-100000px ... ?

UPDATE 2

I found out that, in chrome, if you have an svg inside a div with display:none you can't reference it using <use xlink:href="">. If you use anything else rather than display:none like visibility:hidden, width:0;height:0 ... reference works.
This means using display:none made the browser to skip some steps.
So I'll take that as a partial yes : using display:none may slightly ease the rendering procedure.

Ghetolay
  • 3,222
  • 2
  • 30
  • 29
  • 1
    I'd imagine that it would save some time to just set `display: none` but we're talking about a scale of microseconds with current browsers and processing power. – RevanProdigalKnight Jul 14 '14 at 14:21
  • If you use transitions there's also support for transitionEnd event http://stackoverflow.com/questions/2794148/css3-transition-events and there are several events for several browsers – Bernhard Jul 14 '14 at 14:23
  • @RevanProdigalKnight my use case is a webapp which is pretty heavy it's always good to save some time – Ghetolay Jul 14 '14 at 14:30
  • @bernhard I know that but I'm sure there is plenty of configuration case where this won't work. That's what I meant with 'not universal enough'. – Ghetolay Jul 14 '14 at 14:31

1 Answers1

1

Whatever approaching is used the meaning of "easing" in terms of page load depends on size of your CSS and html content only.

And if by easing you mean client's CUP cycles, then there won't be any clear difference. If your logic is complicated then you might feel efficiency difference by hit and try only.

XIMRX
  • 2,130
  • 3
  • 29
  • 60
  • 1
    I wasn't talking about the page load but about rendering/repaint. It's a webapp with a lot of widgets and animations so with bad practice rendering at some point. I thought there were some kind of obvious answer but it seems not. – Ghetolay Jul 15 '14 at 13:08