Javascript 性能 - Dom Reflow - Google 文章

Question

有人可以向我证明给出的建议 here (在下面复制)关于在更改 dom 元素之前删除它们然后重新插入它们的速度更快。

通过证明，我希望看到一些数字。他们研究这个很好，但我认为这篇文章非常薄弱，没有包括关于“问题”到底是什么以及解决方案如何在速度方面修复的细节(如文章标题加速 JavaScript)

文章....

流外 DOM 操作

这个模式让我们可以创建多个元素并将它们插入到 DOM 中触发单次回流。它使用一种称为 DocumentFragment 的东西。我们在 DOM 之外创建一个 DocumentFragment(因此它是流外的)。然后我们创建并向其添加多个元素。最后，我们将 DocumentFragment 中的所有元素移动到 DOM，但触发一次重排。问题

让我们创建一个函数来更改元素中所有 anchor 的 className 属性。我们可以通过简单地遍历每个 anchor 并更新它们的 href 属性来做到这一点。问题是，这可能会导致每个 anchor 的回流。

function updateAllAnchors(element, anchorClass) {
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
}

解决方案

为了解决这个问题，我们可以从 DOM 中移除元素，更新所有 anchor ，然后将元素插入到原来的位置。为了帮助实现这一点，我们可以编写一个可重用的函数，它不仅可以从 DOM 中删除一个元素，还可以返回一个将元素插入到其原始位置的函数。

/**
 * Remove an element and provide a function that inserts it into its original position
 * @param element {Element} The element to be temporarily removed
 * @return {Function} A function that inserts the element into its original position
 **/
function removeToInsertLater(element) {
  var parentNode = element.parentNode;
  var nextSibling = element.nextSibling;
  parentNode.removeChild(element);
  return function() {
    if (nextSibling) {
      parentNode.insertBefore(element, nextSibling);
    } else {
      parentNode.appendChild(element);
    }
  };
}

现在我们可以使用这个函数来更新流外元素中的 anchor ，并且仅在我们移除元素和插入元素时触发回流。

function updateAllAnchors(element, anchorClass) {
  var insertFunction = removeToInsertLater(element);
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
  insertFunction();
}

Answer 1

您会发现很难从 javascript 分析中获得有意义的数据，因为您实际上是在保存重绘和重新流动，而这在大多数分析工具中都不会出现。您可以使用 Firebug paint events extension以直观方式向您展示您保存了多少重绘。