how to "suspend" layout

[CAFxX]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hi all,
I was wondering whenever it existed a method to tell browsers to suspend
the layout of the page while a js function is executed.
This problem arises from the fact that I'm currently trying to code a
page with many transparent elements (be they transparent PNGs or simply
elements with css opacity < 1) and every time I move or otherwise change
one of their (visual) properties, the browser has to repaint almost
everything.
This may be fine until you modify just one element once in a while, but
if you're trying to _animate_ multiple elements, the processor
skyrockets immediately to 100% and the animation, well... it's not quite
an animation.
So I thought that, maybe, there existed a (eventually even non-standard)
way to tell the browser not to repaint the elements until I
moved/modified all those I wish to. Something like:

function AnimationCallback() {
SuspendLayout();

// perform all elements manipulation here

ResumeLayout();
}

or the like.
While this won't solve the fact that browsers are still terribly slow
when handling transparencies, maybe it could help a bit.
Any insight on this would be much appreciated.
Thank you,
Carlo Alberto Ferraris
strayorange.com
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.7 (MingW32)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iD8DBQFHP/eIypa2JhbVv6QRAtMTAJ9XPTE7CL+z3PEnMbmilm3qlfasQACgv0cO
XWFUOxkkEFmcUCz6N27H2U8=
=nr0j
-----END PGP SIGNATURE-----

 

[VK]

I was wondering whenever it existed a method to tell browsers to suspend
the layout of the page while a js function is executed.

You don't need to do anything for that, because graphics context
doesn't get updated until you exit from the execution context, until
then DOM changes being accumulated but not reflected. Right the
opposite, an often problem is to *display* DOM changes as soon as they
happened within a function.

function AnimationCallback() {
// SuspendLayout();

// on enter to AnimationCallback
// the graphics context gets suspended,
// you don't need to do anything

// perform all elements manipulation here

// DOM changes reflected in the DOM tree
// but not reflected in the graphics context

//ResumeLayout();

}

// on execution context exit all accumulated
// DOM changes are being reflected in the
// graphics context (something like Java's gc.redraw()

 

[Thomas 'PointedEars' Lahn]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Please put this in the header or disable it for NetNews.

Your From header is also broken, see

- RFC1036 subsection 2.1.1
- RFC2822 subsection 3.4.1
- RFC 1855 subsection 3.1.1, and
- probably the Terms of Use of your access provider.

I was wondering whenever it existed a method to tell browsers to suspend
the layout of the page while a js function is executed.
This problem arises from the fact that I'm currently trying to code a
page with many transparent elements (be they transparent PNGs or simply
elements with css opacity < 1) and every time I move or otherwise change
one of their (visual) properties, the browser has to repaint almost
everything.
This may be fine until you modify just one element once in a while, but
if you're trying to _animate_ multiple elements, the processor
skyrockets immediately to 100% and the animation, well... it's not quite
an animation.

Try to use timeout/interval values that are not below the system
ticker interval. Values of 100 (ms) and above should be safe.


PointedEars

 

[Ed]

So I thought that, maybe, there existed a (eventually even non-standard)
way to tell the browser not to repaint the elements until I
moved/modified all those I wish to. Something like:

function AnimationCallback() {
SuspendLayout();

// perform all elements manipulation here

ResumeLayout();

}

This article might be helpful:

http://dev.opera.com/articles/view/efficient-javascript/?page=3

This is also discussed here (see "Edit Subtrees Offline"):

http://www.peachpit.com/articles/article.aspx?p=31567&seqNum=5&rl=1

 

[CAFxX]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Ed ha scritto:

This article might be helpful:

http://dev.opera.com/articles/view/efficient-javascript/?page=3

mmmh, what's written in here conflicts with what VK said in a previous
post...

VK:

[...] graphics context
doesn't get updated until you exit from the execution context, until
then DOM changes being accumulated but not reflected.
dev.opera.com:
Making several style changes at once

Just like with DOM tree modifications, it is possible to make several
style related changes at the same time, in order to minimise the number
of repaints or reflows. The common approach is setting of styles one
at a time:
[...]
That approach could mean multiple reflows and repaints.

am I misreading them, or do they say one the opposite of the other?

This is also discussed here (see "Edit Subtrees Offline"):

http://www.peachpit.com/articles/article.aspx?p=31567&seqNum=5&rl=1

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.7 (MingW32)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iD8DBQFHQgISypa2JhbVv6QRAu5rAJ0Ytd+b/0bJgkcLabph+hJIgmTZ3gCfe5EZ
dwO6jWG8eQ8FgfPyve9Bc08=
=Cy8M
-----END PGP SIGNATURE-----