[Javascript] Positioning in IE

[Hakan Magnusson (Backbase)]

Included a very basic testcase that benchmarks the (correct, according 
to MSDN) use of pixelLeft, posLeft and left.

> If I recall correctly, when stating pixelLeft, the browser looks up previous state than adds positive or negative value to the existing one.

You do not recall correctly. Both pixelLeft and posLeft takes integer 
values, and by doing element.style.posLeft += 1 or 
element.style.pixelLeft += 1 you can add or subtract to the current value.

> I use integer +px string with posLeft or Right/\ Top when increasingly possitioning the object.

That's not very clever of you. A ten second lookup at MSDN would tell 
you that neither property takes string values, so your code is maybe as 
much as twice as slow as it could have been, AND you're using 
proprietary methods. So, you're doing it the wrong way, which also ends 
up being the slowest way.

<MSDN>
Unlike the left property, the pixelLeft value is an integer, not a 
string, and is always interpreted in pixels.

Unlike the left property, the posLeft property value is a floating-point 
number, not a string.
</MSDN>

Finally, Internet Explorer is silly slow on string operations, which 
could explain the lengthy style.left-operation. Try adding 'px' to the 
posLeft benchmark, just for reference.

As a conclusion, any operation that requires only an integer value is 
significantly faster than operations that require string values, in 
Internet Explorer.

Please stick to facts and not guessing when posting to a public forum 
where people try to learn something.

Regards,
H

Matt Barton wrote:
> Oh, I see.  I clearly got too excited when I read ...
> 
> 
>>                 glava.style.posLeft="500px"
>>Is the fastest coding syntax for dynamical positioning
> 
> 
> ... I thought you were going to tell us something interesting about the
> 'style.posLeft' attribute, rather than something obvious about document.all
> or document.getElementById.
> 
> Ho-hum.
> 
> Matt
> 
> ----- Original Message ----- 
> From: "Troy III Ajnej" <trojani2000 at hotmail.com>
> To: <javascript at LaTech.edu>
> Sent: Tuesday, July 27, 2004 3:34 PM
> Subject: Re: [Javascript] Positioning in IE
> 
> 
> 
>>
>>The call: document.all
>>is never to be used inside a loop, it will sllow the script from few to
>>hundred and thousand times, depending on how complex the page is (the
> 
> number
> 
>>of doc objects contained) every time you call  document.all it iterates
> 
> all
> 
>>the objects. Than if you state get element by ID it scrolls again through
>>all the elements containing id, than, it has to compare if one of them
> 
> yelds
> 
>>true to give the permission to ecxecute, if after this you have given f.i.
>>pixelLeft than it has to do some math to decide where to put the element,
>>but if you instruct posLeft, there is no math it assumes zero at left and
>>simply adds the new value. Try some of variants you know that will move
> 
> the
> 
>>object from left to right pixel by pixel in some old computer and see for
>>your self.
>>I use integer +px string with posLeft or Right/\ Top when increasingly
>>possitioning the object.
>>If I recall correctly, when stating pixelLeft, the browser looks up
> 
> previous
> 
>>state than adds positive or negative value to the existing one. And this
>>means more processing. (but of course, with the P4 2.66 or 3.2 GHz you
> 
> will
> 
>>hardly notice the difference.)
>>
>>
>>
>>
>>
>>>From: "Matt Barton" <javascript at mattbarton.org>
>>>Reply-To: "[JavaScript List]" <javascript at LaTech.edu>
>>>To: "[JavaScript List]" <javascript at LaTech.edu>
>>>Subject: Re: [Javascript] Positioning in IE
>>>Date: Tue, 27 Jul 2004 09:15:21 +0100
>>>
>>>----- Original Message -----
>>>From: "Troy III Ajnej" <trojani2000 at hotmail.com>
>>>
>>>>                  glava.style.posLeft="500px"
>>>>
>>>>Is the fastest coding syntax for dynamical positioning. Specially when
>>>>moving objects pixel by pixel.
>>>>Feel free to ask Why, Hakan.
>>>
>>>Morning,
>>>
>>>Just wondering what the explanation behind this is: I've a few pieces of
>>>code in my intranet app which use dynamic positioning, moving objects
> 
> pixel
> 
>>>by pixel, so anything that could help me understand how to do this more
>>>efficiently would be more than welcome.
>>>
>>>In anticipation,
>>>Matt.
>>>
>>>_______________________________________________
>>>Javascript mailing list
>>>Javascript at LaTech.edu
>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>>_________________________________________________________________
>>STOP MORE SPAM with the new MSN 8 and get 2 months FREE*
>>http://join.msn.com/?page=features/junkmail
>>
>>_______________________________________________
>>Javascript mailing list
>>Javascript at LaTech.edu
>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>>-- 
>>This email has been verified as Virus free
>>Virus Protection and more available at http://www.plus.net
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20040729/dd48a4d8/attachment.html>