Javascript 流外DOM操作

这是从

据我所知，添加/删除元素会导致回流。换课也是如此。但在解决方案中，您添加了和删除，从而导致两倍于问题代码的回流次数。当然，并非所有的回流都是相等的，那么类名更改回流是否比附加/删除回流更昂贵？我缺少什么使解决方案代码比问题代码更有效

此模式允许我们创建多个元素并将它们插入到 DOM触发一次回流。它使用一种叫做 文档片段。我们在DOM之外创建一个DocumentFragment（因此 它超出了流程）。然后，我们创建并添加多个元素到 这最后，我们将DocumentFragment中的所有元素移动到DOM中 但是触发一次回流

问题

让我们创建一个函数来更改所有 元素内的锚定。我们可以通过简单的迭代来实现这一点 通过每个锚点并更新其href属性。问题 是的，这可能会导致每个锚的回流

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

现在我们可以使用这个函数来更新元素中的锚 这是流外的，并且只有在我们移除组件时才会触发回流 元素，并且当我们插入元素时

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

函数更新Lanchors（元素，锚点类）{
var insertFunction=removeToInsertLater（元素）；
var archors=element.getElementsByTagName（'a'）；
对于（var i=0，length=anchors.length；i

---

因此，文档片段存在于“内存中”，而不是页面上。操作不会触发任何重绘/流，因为片段在任何地方都没有可视化表示。当您将其放到页面上时，一旦您完成了对其的操作，浏览器就会知道其结构、类、内容等，因此只需回流/绘制一次

在第一个示例中，当您循环定位并更改类名（可能也会更改其样式）时，它将立即应用该类，找到新样式，并重新绘制该链接。然后对下一个进行同样的操作。这太慢了

---

通过将其全部拉入内存并在内存中操作DOM，当您将父包装器元素重新插入页面时，您只有一个重新绘制/流。

因此文档片段存在于“内存中”，而不是页面上。操作不会触发任何重绘/流，因为片段在任何地方都没有可视化表示。当您将其放到页面上时，一旦您完成了对其的操作，浏览器就会知道其结构、类、内容等，因此只需回流/绘制一次

在第一个示例中，当您循环定位并更改类名（可能也会更改其样式）时，它将立即应用该类，找到新样式，并重新绘制该链接。然后对下一个进行同样的操作。这太慢了

---

通过将其全部拉入内存并在内存中操作DOM，当您将父包装器元素重新插入页面时，您只有一个重新绘制/流。

假设您要更改100万个元素的类

直接这样做将导致100万次回流——每类一次

但是，如果从DOM中删除它的父级，更改所有类，然后将其插入回DOM，那么只会发生2次回流，因为更改文档外部的元素不会导致回流

---

因此，基本上，如果有很多元素，则删除和重新插入更有效。如果只有少数元素，则无需执行此操作。

假设要更改100万个元素的类

直接这样做将导致100万次回流——每类一次

但是，如果从DOM中删除它的父级，更改所有类，然后将其插入回DOM，那么只会发生2次回流，因为更改文档外部的元素不会导致回流

---

因此，基本上，如果有很多元素，则删除和重新插入更有效。如果您只有几个，则无需执行此操作。

根据解决方案：

为了解决这个问题，我们可以从DOM中删除元素update 所有锚定，然后将图元插入原来的位置

---

因此，在这种情况下，它将触发2次回流（一次用于移除，一次用于插入）。因此，当您希望一次修改2个以上的元素时，此解决方案适用。

根据解决方案：

为了解决这个问题，我们可以从DOM中删除元素update 所有锚定，然后将图元插入原来的位置

因此，在这种情况下，它将触发2次回流（一次用于移除，一次用于插入）。因此，当您希望一次修改两个以上的图元时，此解决方案适用

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