Javascript：优化了iframe（如DOM节点）的重新排序

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

该页面由div组成，每个div包含一个iFrame，因此当许多div都是document.body的子级时，所有iFrame都像HTML页面一样，一个接一个

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

（iFrame已在排序时加载）

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

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

我改编了这个

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不是我的主要编程环境

---

那么，该算法是从顶部重新绘制并表现良好，还是它包含大量交换且速度慢？

它的性能与您将获得的性能差不多，因为排序（以及交换）是在不再位于DOM中的DOM元素数组中完成的，因此不会导致重绘/重绘

就DOM而言，唯一的操作是随后将每个顺序正确的元素一个接一个地追加回DOM中

这应该是好的；如果您有很多元素，您可能会通过一次性将整个重新排序的HTML转储到DOM中，而不是一个接一个地将每个元素转储到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('');

---

它的性能取决于您将要获得的性能，因为排序（以及交换）是在不再位于DOM中的DOM元素数组中完成的，因此不会导致重新绘制/回流

就DOM而言，唯一的操作是随后将每个顺序正确的元素一个接一个地追加回DOM中

这应该是好的；如果您有很多元素，您可能会通过一次性将整个重新排序的HTML转储到DOM中，而不是一个接一个地将每个元素转储到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('');

---

这个片段看起来不错。尽管由于HTML元素是通过引用传递的，所以实际上并不需要

映射。您没有创建新的，因此删除它们然后再将它们添加回是不必要的工作

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

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


const ul=document.querySelector（“ul”）；
const btn=document.querySelector（“按钮”）；
btn.addEventListener（“单击”，（）=>{
[…ul.儿童]
.sort（（x，y）=>Math.random（）-0.5）//创建一个随机顺序
.forEach（（x）=>ul.appendChild（x））；
});

0
一,
二,
三,
四,
五,
六,
七,
八,
九,

重新排序
代码片段看起来不错。尽管由于HTML元素是通过引用传递的，所以实际上并不需要
映射。您没有创建新的，因此删除它们然后再将它们添加回是不必要的工作

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

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


const ul=document.querySelector（“ul”）；
const btn=document.querySelector（“按钮”）；
btn.addEventListener（“单击”，（）=>{
[…ul.儿童]
.sort（（x，y）=>Math.random（）-0.5）//创建一个随机顺序
.forEach（（x）=>ul.appendChild（x））；
});

0
一,
二,
三,
四,
五,
六,
七,
八,
九,

重新排序
我必须强调iFrame已经加载，原则上它们可能有一些延迟，因此重新排序不会强制重新加载它们。我需要DOM元素在重新排序时以某种方式处于“活动”状态。我不知道该算法是否具有破坏性。我必须强调，iFrame已经加载，原则上它们可能有一些延迟，因此重新排序不会强制重新加载它们。我需要DOM元素在重新排序时以某种方式处于“活动”状态。我不知道该算法是否具有破坏性。我必须强调，iFrame已经加载，原则上它们可能有一些延迟，因此重新排序不会强制重新加载它们。我需要DOM元素在重新排序时以某种方式处于“活动”状态。我不知道该算法是否具有破坏性。不幸的是，iFrame将使用此方法重新加载。我为一个解决方案添加了一个额外的代码片段，该解决方案无需重新加载iFrame。我认为我必须在div上设置的唯一样式属性是“order”（orderIndex）和“display”（flex）。我说得对吗？还有，如何在一条指令中更改div的所有“order”属性，以便不进行部分重新排序？这是正确的，第二种解决方案是按数字进行排序（升序）。因此，您只需输入
orderIndex
（我将代码段也更改为使用此项）。至于CSS，您实际上只需要在根元素上显示
display:flex
，在所有子元素上显示
order
。如果要垂直移动，也可以将
flex-direction:column
添加到根目录，如果要继续下一行，则可以添加
flex-wrap
。不幸的是，不可能在一条指令中完成所有的重新排序，因为我们分配了CSS。然后，除非你有很多元素，否则改变几乎是瞬间的