Javascript 适用于大型应用的回流/布局性能

我正在使用GWT构建一个HTML应用程序，其性能通常是正确的

有时，它会在DOM中加载许多对象，应用程序会变得很慢。我使用Chrome Developer Tools Profiler查看这段时间花在哪里（编译应用程序后，在Chrome下，即没有GWT开销），很明显，方法getAbsoluteLeft（）/getBoundingClientRect（）占用了这段时间的大部分时间

以下是在Chrome（com.google.gwt.dom.client.dominmplstandardbase）下使用的实现：

这对我来说很有意义，因为DOM中的元素越多，计算绝对位置所需的时间就越长。但这是令人沮丧的，因为有时您知道应用程序的一个子部分已经更改，而这些方法仍然需要时间来计算绝对定位，可能是因为它不必要地重新检查了一大堆DOM元素。我的问题不一定是面向GWT的，因为这是一个与浏览器/javascript相关的问题：

对于大型DOM元素应用程序，是否有任何已知的解决方案可以改进GWT getAbsoluteLeft/javascript getBoundingClientRect问题

我在互联网上没有找到任何线索，但我想到了如下解决方案：

• （减少对这些方法的调用次数：-）
• 通过iframe隔离部分DOM，以减少浏览器为获得绝对位置而必须计算的元素数（尽管这会使组件难以通信…）
• 同样，可能存在一些css属性（溢出、位置？）或一些html元素（如iframe），它们告诉浏览器跳过dom的整个部分，或者只是帮助浏览器更快地获得绝对位置

编辑：

使用Chrome TimeLine调试器，在DOM中有很多元素的情况下执行特定操作，我获得了平均性能：

• 重新计算样式：几乎为零
• 油漆：接近1毫秒
• 布局：近900毫秒

通过getBoundingClientRect方法进行布局需要900毫秒。此页面列表，包括getBoundingClientRect

由于dom中有许多元素不受我的操作的影响，我假设布局正在整个dom中进行重新计算，而绘制可以通过css属性/dom树来缩小其范围（例如，我可以通过firebug中的MozAfterPaintEvent来查看）

除了分组和少调用触发布局的方法外，关于如何减少布局时间的任何线索？

一些相关文章：

---

对您的问题最基本的答案是使用，也称为延迟评估。原则是，只有当一个新职位所依赖的东西发生了变化时，你才能对它进行评估。它通常需要相当数量的代码来设置，但一旦设置完成，使用起来就更干净了。您需要对某个对象（例如窗口大小）进行一次赋值，然后所有新值自动传播，并且只传播需要传播的值。

我终于解决了我的问题：getBoundingClientRect在应用程序中触发了一个完整的布局事件，这需要多次使用繁重的CSS规则

事实上，布局时间与DOM中元素的数量并不成正比。你可以用光的方式画数十万张，布局只需要2毫秒

在我的例子中，我有两个CSS选择器和一个背景图像，它们匹配数十万个DOM元素，这在布局过程中耗费了大量时间。通过简单地删除这些CSS规则，我将布局时间从900ms减少到2ms

private static native ClientRect getBoundingClientRect(Element element) /*-{
  return element.getBoundingClientRect && element.getBoundingClientRect();
}-*/;

@Override
public int getAbsoluteLeft(Element elem) {
  ClientRect rect = getBoundingClientRect(elem);
  return rect != null ? rect.getLeft()
     + elem.getOwnerDocument().getBody().getScrollLeft()
     : getAbsoluteLeftUsingOffsets(elem);
}