Javascript性能 - Dom Reflow - Google文章

Question

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

通过证明,我想看一些数字.很好,他们研究这个,但我认为这篇文章非常薄弱,没有详细说明"问题"究竟是什么以及解决方案如何修复速度方面(如文章标题加速JavaScript)

这篇文章....

流出DOM操作

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

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

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中删除元素,还可以返回一个将元素插回原始位置的函数.

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

现在我们可以使用这个函数更新一个不在流中的元素中的锚点,并且只在我们删除元素时和插入元素时才触发重排.

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绘制事件扩展来直观地显示您要保存的重绘数量.