Javascript：优化了 re-ordering 个 iFrame，如 DOM 个节点

Question

我的应用有一个 WebView 控件，里面有一个 HTML 页面。

该页面由每个包含一个 iFrame 的 div 组成，因此当许多 div 是 document.body 的 children 时，所有 iFrame 就像 HTML 个页面本身一样，一个接一个。

div 有一个名为 orderIndex 的属性，因为它们必须根据索引数组进行排序。

（排序时 iFrame 已经加载）

这些索引是新位置，例如 orderIndexesArray[0] 包含第一个 child 必须达到的新位置。

我在以下位置找到了一些排序方法：

我改编了这个

var bd = document.body;
Array.prototype.slice.call(bd.children)
.map(function (x) { return bd.removeChild(x); })
.sort(function (x, y) { return /* your sort logic, compare x and y here */; })
.forEach(function (x) { bd.appendChild(x); });

我希望排序过程不像“正在快速重新排序 HTML 页面的闪烁部分”，相反我希望重绘从第一个开始，因此页面的可见部分是几乎没有眨眼。

我也关心性能。 HTML 和 Javascript 不是我的主要编程环境。

那么，该算法是否可以很好地从顶部重新绘制并且性能良好，或者它是否包含大量交换并且速度很慢？

Answer 1

它的性能与您将要获得的性能差不多，因为排序（并因此交换）是在 DOM 个元素的数组中完成的，这些元素不再在 DOM, 所以不会导致 repaints/reflows.

就 DOM 而言，唯一的操作是稍后追加每个正确排序的元素，一个接一个地返回到 DOM。

这样应该没问题；如果你有很多元素，你可能会通过一次性将整个重新排序的 HTML 倾倒到 DOM 中而不是一个接一个地倾倒每个元素来观察到一些边缘增益。

let bd = document.body,
    newHTML = Array.prototype.slice.call(bd.children)
        .map(el => bd.removeChild(el))
        .sort(function (x, y) { return /* your sort logic, compare x and y here */; })
        .map(el => el.outerHTML);
bd.innerHTML += newHTML.join('');

Answer 2

该片段看起来不错。虽然 map 并不是真正需要的，因为 HTML 元素是通过引用传递下来的。您不是在创建新的，因此删除它们然后重新添加它们是不必要的工作。

至于交换的数量，这取决于你拥有的元素数量。尽管每个元素在 DOM 中只被重新排序一次。（这发生在 forEach）

下面的代码片段演示了一个小的工作示例。

const ul = document.querySelector("ul");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  [...ul.children]
  .sort((x, y) => Math.random() - 0.5) // Create a random order
  .forEach((x) => ul.appendChild(x));
});

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

<button>Reorder</button>

编辑：当您更改它们的顺序时，iframe 将重新呈现，因此它们的当前状态将丢失。解决此问题的一个选项是使用 CSS flex + order 属性对帧重新排序。缺点是所有的帧必须有相同的根。

（iframe 在 Whosebug 上不起作用，所以我做了一些假的）

const frames = document.querySelectorAll(".fake-iframe");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  frames.forEach((frame) => (frame.style.order = frame.dataset.orderindex));
});

.frames {
  display: flex;
  flex-wrap: wrap;
}
 
/* Just for demonstration purposes */
.fake-iframe {
  position: relative;
  width: 200px;
  height: 200px;
}

.fake-iframe span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
  font-size: 3rem;
}

<div class="frames">
  <div class="fake-iframe" data-orderIndex="3">
    <span>Frame 3</span>
  </div>
  <div class="fake-iframe" data-orderIndex="2">
    <span>Frame 2</span>
  </div>
  <div class="fake-iframe" data-orderIndex="1">
    <span>Frame 1</span>
  </div>
</div>

<button>Reorder</button>

Javascript：优化了 re-ordering 个 iFrame，如 DOM 个节点

Javascript: Optimized re-ordering of iFrames like DOM nodes

html

javascript

sorting

dom

children