0
Elements with margin-left -100% continue to be rendered or the browser understands that they are outside the "vision area" and stop using computer resources?
And when they’re with opacity: 0 and/or visibility: hidden, this also occurs?
1 answer
2
Yes, it renders.
Proof - https://jsfiddle.net/y1h5cmtc/
By CSS I created a transition from margin-left: -100% to the margin-left: -150%, and he managed to find the difference, which is written on the screen by Javascript.
Therefore, there are 2 different graphical processing in the browser: Renderint and Painting. Painting is processed when some image is changed on the screen, and Rendering when it is necessary to recalculate some attribute of any element, be it the position, color, size, etc.
In this case, Rendering recalculates the position of the element, but Painting does not display on the screen, causing it to be processed only by Rendering.
If you open the "Performance" tab of Chrome Devtools, you will notice the difference in the execution of Painting if, in the transition, you replace the margin-left: -150% for margin-left: 50%, causing it to display on screen the div
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
Only
display: noneto "render" relatively, in the GIFT still exists and affects some behaviors, what happens is that it does not occupy space.– Guilherme Nascimento
Possible duplicate of What is the difference between display:None and visibility:Hidden?
– Guilherme Nascimento
@I don’t think it’s duplicate and I found this discussion very interesting. I tried to search if there is any way to identify with JS if the element is present in the DOM and being rendered or not, but I haven’t found anything yet.
– Woss
@Andersoncarloswoss Only
display: nonedoes not take up space, everything else is technical to "make up", of course each engine can have its own "optimization" scheme to improve performance as per "be able". But if you want to share and discuss every detail or technique maybe I’ll withdraw the vote, I’m still pretty sure that onlydisplayhas effect (except in the "DOM interface"). ;)– Guilherme Nascimento
@Guilhermenascimento yes, only the
displayhas an effect on it, but is there any practical way to show it beyond looking at the browser inspector? I tried to check with JS but couldn’t find a way to find out if a certain element was being rendered . There must be some way...– Woss
@Andersoncarloswoss I think rendering is totally relative, in general for DOM everything exists, the
nonejust not "takes up space", and as to render is something that can vary from engine to engine, aiming at optimization of itself and the user’s machine. I personally where I used todisplay:nonewhen there was a lot of content I noticed a slight improvement (in popular engines), but this is not an affirmative for all engines, just analyzing the engine source, I believe. The answer that is already presented sounds to me (my opinion) as a "huge kick" without certainty of anything.– Guilherme Nascimento
That’s why I commented that it would be an interesting discussion as I imagined that with JS there could be a way to discover this and even to compare different engines.
– Woss
Maybe I’m wrong, the issue of rendering occurs in the interface that is in the core, Javascript has no way to have access to this, unless there is an API that informs, I still think that if something like this exists it would not be something standard, Because each engine manages its shape what will use visual resources and each one has its own strategy, summarizing at the level of the layer "client" I do not believe that there is anything that can be done, at the core level and interaction with the interfaces maybe it is possible to deduce something. But if you wish to discuss the repaint and accelerators I will withdraw my vote.
– Guilherme Nascimento