how to "suspend" layout
CAFxX
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
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Randy Webb
> CAFxX wrote:
>> -----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.
Probably the opposite as munged From headers are often encouraged by
access providers. Can't spam an address you don't have.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
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
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-----
Randy Webb
> -----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.
The word should be "content" and not "context" (the first occurrence)
but the advice is correct.
> 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?
You are mis-reading. What that text is referring to is that instead of
making 100 repaints to move a div 100 times, you could move it 100 times
and then repaint. The difference is whether you want to see the movement
or not.
PGP signatures in Usenet are for people that don't know any better.