javascript - 大型应用程序的回流/布局性能

Question

我正在使用 GWT 构建一个 HTML 应用程序，总体上性能是正确的。

有时，它会加载 DOM 中的许多对象，导致应用程序变慢。我使用 Chrome Developer Tools Profiler 来查看时间花在了哪里(在 Chrome 下，一旦应用程序被编译，即没有 GWT 开销)并且很明显方法 getAbsoluteLeft()/getBoundingClientRect() 消耗了主要的这段时间的一部分。

这是 Chrome 下使用的实现(com.google.gwt.dom.client.DOMImplStandardBase):

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

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

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

我没有在互联网上找到任何线索，但我想到了这样的解决方案:

• (减少对这些方法的调用次数 :-) ...
• 通过 iframe 隔离部分 DOM，以减少浏览器为获得绝对位置而必须评估的元素数量(尽管这会使组件难以通信......)
• 在同样的想法中，可能有一些 css 属性(溢出，位置？)或一些 html 元素(如 iframe)告诉浏览器跳过 dom 的整个部分或只是帮助浏览器更快地获得绝对位置

编辑:

使用 Chrome TimeLine 调试器，并在 DOM 中有很多元素时执行特定操作，我的性能一般:

• 重新计算样式:几乎为零
• 绘制:将近 1 毫秒
• 布局:近 900 毫秒

Layout 通过 getBoundingClientRect 方法耗时 900ms。本页列表all the methods triggering layout in WebKit , 包括 getBoundingClientRect ...

因为我在 dom 中有很多元素不受我的操作影响，我假设 layout 在整个 DOM 中进行重新计算，而 paint 可以通过 css 属性/DOM 树以缩小其范围(例如，我可以通过 firebug 中的 MozAfterPaintEvent 看到它)。

除了分组和少调用触发布局的方法，有什么减少布局时间的线索吗？

一些相关文章:

• Minimizing browser reflow

Answer 1

我终于解决了我的问题:getBoundingClientRect 在应用程序中触发了一个完整的 layout 事件，这需要多次通过繁重的 CSS 规则。

事实上，布局时间与DOM中元素的数量并不成正比。您可以使用 light 样式绘制数十万个，布局只需 2ms。

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