gpt4 book ai didi

javascript - 如何对触发最少回流的 DOM 元素进行排序?

转载 作者:搜寻专家 更新时间:2023-11-01 05:09:28 24 4
gpt4 key购买 nike

我有下面的例子。

<div class="parent">
<div data-id="5"></div>
<div data-id="2"></div>
<div data-id="3"></div>
<div data-id="1"></div>
<div data-id="4"></div>
</div>

如果我想按升序 (1,2,3,4,5) 对这些 div 进行排序。我通常会做一个循环并将 div 附加到 parent div。然而,这将意味着我总是对 dom 进行 5 次更改(无论 div 的顺序如何),每个 div 一次。

但是您可以使用 .insertBefore()仅需 2 处更改 即可正确排序 div 的方法!

5,2,3,1,4
Insert 1 before 2
5,1,2,3,4
Insert 5 behind 4 (using .insertBefore() and .nextSibling)
1,2,3,4,5

问题 1 通过仅对 DOM 进行 2 次更改,我假设回流发生较少,从而使“2 次更改”排序操作比“5 次更改”排序操作更快。这是正确的吗?

问题 2 什么样的方法/算法能够找出只插入 1 before 25 behind 4

问题 3(奖励) 随着项目数量的增加,这种“优化”算法是否仍然更快?范围 10 - 100 - 1.000 - 10.000 - 100.000

也许要澄清一下:不是在寻找一种方法来以最佳方式计算顺序 (1,2,3,4,5)。在某个时候我知道顺序,但我想将顺序与 div 的顺序进行比较,然后计算出最少的操作

最佳答案

对浏览器的功能更有信心。

  1. 当 DOM 操作在 JavaScript 序列的单个同步执行中执行时,浏览器会将它们批处理在一起。当您通过访问要求 DOM 是最新的 DOM 属性/方法(例如, innerWidthoffsetTopgetBoundingClientRect。参见 Rendering: Repaint, Reflow, Restyle了解详情。
    删除 DOM 节点不是必需的。将它们添加到新创建的 DocumentFragment ,它们将自动从 DOM 中的当前位置移除。

  2. 浏览器,更具体地说是 JS 引擎,已经知道并使用最智能的排序算法。除了非常特殊的情况,您不需要了解排序操作的内部机制。只需使用 Array.prototype.sort ,如有必要,提供自定义函数,并观察奇迹的发生。

关于javascript - 如何对触发最少回流的 DOM 元素进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45320897/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com