关于DOM Reflow的快速入门

Question

If I have an image set to display none; eg:

#myImg {position:absolute;left:100px;top:100px;display:none;}

And I move it with Js like so:

function Move ()
{var pic=document.getElementById ("myImg");
 myImg.style.left=200+'px';
 myImg.style.top=200+'px';
}

Does it cause a reflow even though it's set to 'display:none'?

And what about visibility:hidden?

Answer 1

In my previous post I boldly claimed that elements with display: none will not have anything to do with the render tree. IE begs to differ (thanks to dynaTrace folks for pointing that out).

A good way to minimize reflows is to update the DOM tree "offline" out of the live document. One way to do so is to hide the element while updates are taking place and then show it again.

Check out http://www.phpied.com/the-new-game-show-will-it-reflow/