How to calculate the position (x,y) of an element on the page without triggering reflow using Dart (in js)? -

i calculate position of element in page using dart (compiled js). read might trigger reflow, make costly in time? true?

reflow/layout performance large application

position offset(element elem) {   final docelem = document.documentelement;   final box = elem.getboundingclientrect();    double left = box.left + window.pagexoffset - docelem.clientleft;   double top = box.top  + window.pageyoffset - docelem.clienttop;   int width = box.width.truncate();   int height = box.height.truncate();   return new position(left.truncate(), top.truncate(),                       width, height); } 

the key minimizing reflows batch reads , writes. read might trigger reflow if there pending writes happened before it, sequential reads not trigger reflows. in isolation it's hard tell whether trigger reflow or not. can protect against requesting reflow first requestanimationframe. helps when have multiple reads , want trigger single reflow before of them, must use requestanimationframe.

in dart give animationframe property returns future more idomatic.

the tricky part since animationframe , requrestanimationframe asynchronous, offset function must to, , return future<position>. cause callers async too.

future<position> offset(element elem) {   return window.animationframe.then((_) {     final docelem = document.documentelement;     final box = elem.getboundingclientrect();      double left = box.left + window.pagexoffset - docelem.clientleft;     double top = box.top  + window.pageyoffset - docelem.clienttop;     int width = box.width.truncate();     int height = box.height.truncate();      return new position(left.truncate(), top.truncate(),                         width, height);   }); }