Menu
What are the performance implications of hiding a complex portion of an HTML document within an offscreen DIV like:
<div style="position:absolute;top:-10000px;left:-10000px;">
Lots of HTML here...
</div>
as compared to using "display: none" or "visiblity: hidden" ?
Is there a performance/memory-usage penalty? How bad is it? Can this be advisable if the targets are mobile browsers (iPhone/Android)?
309
Display none don't improve the performance because the goal of virtual scrolling is reduce the number of the elements into the dom. Make an element display none or remove an element, trigger a reflow, but with display none you worst the performance because you don't have the benefit of reduce the dom.
Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap, so it can be rendered anywhere, for example, on texture in a 3D scene. The offscreen rendering in Electron uses a similar approach to that of the Chromium Embedded Framework project.
display: none : hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents. visibility: hidden : hides the element and keeps its rendering state.
Performance-wise you're best to build up your HTML as a string as insert it into the DOM in one go. DOM changes trigger redraws, so the fewer DOM changes the better.
42
It depends on the browser. Here is good article about rendering, reflow repaint in browsers. So theoretically it should be not rendered when something changed on the side as all absolute positioned elements will not rerendered when something changed in there parent elements. So it should perform better then display:none which will be rerendered in IE for example. But you have still a lot of DOM elements in browser memory. So maybe its better to put the elements out of the DOM and add them again later.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
