如何在不使用 Dart(以 js 为单位)触发重排的情况下计算页面上元素的位置 (x，y)

Question

我使用Dart（编译为JS）计算页面中元素的位置。然而，我读到这可能会触发回流，这将使这在时间上付出代价？这是真的吗？

大型应用的回流焊/布局性能

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);
}

Answer 1

最小化回流的关键是批量读取和写入。如果之前发生了挂起的写入，则读取可能会触发重排，但顺序读取不会触发重排。孤立地，很难判断这是否会触发回流。您可以通过先使用 requestAnimationFrame 请求重排来防止它。当您有多个读取并希望在所有读取之前仅触发一次重排时，这会有所帮助，但它们都必须使用 requestAnimationFrame 。

在Dart中，我们为您提供了一个animationFrame属性，该属性返回一个Future以更加偶像化。

棘手的部分是，由于animationFrame和requrestAnimationFrame是异步的，因此您的offset函数必须是to，并返回一个Future<Position>。这必然会导致所有调用方也是异步的。

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);
  });
}