问流外DOM操作

EN

这是从https://developers.google.com/speed/articles/javascript-dom得到的

据我所知，附加/移除元素会导致再流。换班也是。但是，在解决方案中，您需要附加和删除，从而导致为问题代码的折返数的两倍。当然，并不是所有的更新都是相同的，那么类名更改是否比附加/删除更新更昂贵呢？我遗漏了什么使解决方案代码比问题代码更有效？

此模式允许我们创建多个元素并将它们插入DOM中，从而触发单个重流。它使用一种叫做DocumentFragment的东西。我们在DOM之外创建一个DocumentFragment (因此它超出了流)。然后，我们创建并添加多个元素。最后，我们将DocumentFragment中的所有元素移动到DOM中，但是触发一个单一的重流。 问题所在 让我们创建一个函数来更改元素中所有锚点的className属性。我们可以通过迭代每个锚点并更新它们的href属性来做到这一点。问题是，这可能会导致每个锚的回流。 函数updateAllAnchors(element，anchorClass) { var锚= element.getElementsByTagName('a')；for (var i= 0，length = anchors.length；i< length；i ++) { anchorsi.className = anchorClass；} 解决方案 为了解决这个问题，我们可以从DOM中删除元素，更新所有锚，然后将元素插入回原来的位置。为了帮助实现这一点，我们可以编写一个可重用的函数，它不仅从DOM中删除一个元素，而且还返回一个函数，该函数将元素插入到它原来的位置。 /** *移除一个元素，并提供一个函数将其插入到它原来的位置* @param元素{ element }，该元素将临时删除*@返回{ function }一个函数，该函数将元素插入其原始位置**/ removeToInsertLater(元素){ var parentNode = element.parentNode；var nextSibling = element.nextSibling；parentNode.removeChild(元素)；返回函数{ if (nextSibling) {parentNode.insertBefore(元素，nextSibling)；}element.parentNode{parentNode.appendChild(元素)；}} 现在，我们可以使用这个函数来更新超出流的元素中的锚，并且只有在删除元素和插入元素时才触发重新流。 函数updateAllAnchors( anchorClass) { var insertFunction =removeToInsertLater(元素)；var锚点= element.getElementsByTagName('a')；for (var i= 0，length = anchors.length；i< length；i ++) { anchorsi.className = anchorClass；}insertFunction()}；