Javascript性能 - Dom Reflow - Google文章 [英] Javascript Performance - Dom Reflow - Google Article

问题描述

有人可以向我证明此处提供的建议（已复制）关于在更改dom元素之前删除dom元素然后重新插入它们的速度更快。

Could someone prove to me that the advice given here (copied below) regarding removing dom elements before altering them and then re-inserting them is ever quicker.

通过证明，我想看一些数字。他们很好地研究了这一点，但我认为这篇文章非常弱，没有详细说明问题实际上是什么以及解决方案如何修复速度方面（如文章标题加速JavaScript）

By prove, I would like to see some figures. Its great that they research this but I think the article is very weak without including specifics as to what the 'problem' actually is and how the solution fixes is in terms of speed (as the article title Speeding up JavaScript)

文章....

流程外DOM操作

这种模式允许我们创建多个元素并将它们插入到DOM中，从而触发单个重排。它使用了一种叫做DocumentFragment的东西。我们在DOM之外创建一个DocumentFragment（因此它不在流程中）。然后，我们创建并添加多个元素。最后，我们将DocumentFragment中的所有元素移动到DOM，但触发单个重排。
问题

This pattern lets us create multiple elements and insert them into the DOM triggering a single reflow. It uses something called a DocumentFragment. We create a DocumentFragment outside of the DOM (so it is out-of-the-flow). We then create and add multiple elements to this. Finally, we move all elements in the DocumentFragment to the DOM but trigger a single reflow. The problem

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

Let's make a function that changes the className attribute for all anchors within an element. We could do this by simply iterating through each anchor and updating their href attributes. The problems is, this can cause a reflow for each 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中删除元素，更新所有锚点，然后将元素插回到原来的位置。为了帮助实现这一目标，我们可以编写一个可重用的函数，不仅可以从DOM中删除元素，还可以返回一个函数，将元素插回到原始位置。

To solve this problem, we can remove the element from the DOM, update all anchors, and then insert the element back where it was. To help achieve this, we can write a reusable function that not only removes an element from the DOM, but also returns a function that will insert the element back into its original position.

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

现在我们可以使用这个函数来更新一个元素中的锚点-of-the-flow，只在我们删除元素时以及插入元素时触发重排。

Now we can use this function to update the anchors within an element that is out-of-the-flow, and only trigger a reflow when we remove the element and when we insert the element.

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

推荐答案

你会发现很难通过javascript分析获得有意义的数据，因为你真的在保存重新绘制和重新流动，这些都不会出现在大多数分析工具中。您可以使用 Firebug绘制事件扩展来直观地向您展示有多少重绘你要保存。

You will find it hard to get meaningful figures for this from javascript profiling as you are really on saving repaints and re-flows which won't show up in most profiling tools. You can use the Firebug paint events extension to show you visually how many repaints you're saving.

这篇关于Javascript性能 - Dom Reflow - Google文章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！