How to retrieve offsetWidth/clientWidth of an element

[Tom]

How to retrieve offsetWidth/clientWidth of an element? It seems to be
Element.rect but not sure. Thanks.

[financeCoding]

Hi Tom, 

Element.rect returns a Future http://goo.gl/KTgkY , you can access http://goo.gl/lPZC1 in the following way http://goo.gl/O7bWF . Also check out Seth Ladd post about Futures http://goo.gl/JSSXP

Kind Regards,

Adam 

[Tom]

Hi Adam,

Thanks.

It looks complication than it shall be. Any idea why not as simple as
element.offsetWidth?

On Mar 15, 11:21 am, financeCoding <financecod...@gmail.com> wrote:
> Hi Tom,
>

> Element.rect returns a Futurehttp://goo.gl/KTgkY, you can accesshttp://goo.gl/lPZC1in the following wayhttp://goo.gl/O7bWF. Also check
> out Seth Ladd post about Futureshttp://goo.gl/JSSXP

[Seth Ladd]

Hi Tom,

offsetWidth can cause an expensive reflow: http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/

Using a Future helps with web app performance by reducing synchronous code in the face of potentially expensive calls to the browser.

Seth

[Tom]

Sure, it is expensive but it's developer's call whether and when to
use, isn't it?

On Mar 16, 11:42 am, Seth Ladd <sethl...@google.com> wrote:
> Hi Tom,
>

> offsetWidth can cause an expensive reflow:http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-par...

[Bob Nystrom]

On Thu, Mar 15, 2012 at 10:02 PM, Tom <tom....@gmail.com> wrote:

Sure, it is expensive but it's developer's call whether and when to
use, isn't it?

Good point. Trying to discourage developers from doing something that will hose their performance without them realizing it is nice, but completely preventing them from writing code they way they want is possibly going too far. This is something we've been discussing for a while. Here's another thread with some more context:

http://groups.google.com/a/dartlang.org/group/misc/browse_thread/thread/f4a309b3de41d686

Cheers!

- bob

[Jay Young]

How does that work under the covers?  The underlying library is still reading node.style.offsetWidth, which is a synchronous operation.  How does using a future prevent the browser from stopping the world to do reflows/repaints and calculations?  This seems like a synchronous operation unnecessarily wrapped in an async control flow (unless I misunderstand something, which is totally possible).

[Jay Young]

On Sunday, March 18, 2012 12:04:50 PM UTC-4, Jay Young wrote:

...  The underlying library is still reading node.style.offsetWidth ...

Sorry, meant "element.offsetWidth".

[Justin Fagnani]

You can check out the source yourself, it's in html_frog.dart which is now conveniently shown in the editor (I love that feature).

The implementation adds each measurement request to a queue and evaluates all the measurements at the end of the current event loop. So while the calls to element.offset* are synchronous and do trigger a layout, all the calls generated by Element.rect() are batched together.

-Justin

[Jay Young]

Ah hah.  Brilliant!  I tried looking for the implementation but couldn't find it (using an old version of the editor, I guess).  Thanks.