时间戳

首页 > 解决方案 > Javascript：优化 iFrame 的重新排序，如 DOM 节点

javascript - Javascript：优化 iFrame 的重新排序，如 DOM 节点

问题描述

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

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

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

（iFrame 在排序时已经加载）

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

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

https://stackoverflow.com/a/39569822/930835

我改编了这个

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

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

标签： javascripthtmlsortingdomchildren

解决方案

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

就 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('');

推荐阅读