How can I sort the DOM elements causing the least amount of redevelopment?

Question

I have the following example.

<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>

If I want to order these divs in ascending order (1,2,3,4,5). I usually did a loop and added a div for

. This, however, means that I always make 5 changes to dom (regardless of the order of the div), one for each div.

However, you can use the method . insertBefore () to order the div correctly with only 2 changes !

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 

Question 1 Having made only 2 changes in the DOM, I assume less reflow ocours, making the “2 changes” sort operation faster than the “5 change” action. Is it correct?

2. / 1 before 2 5 behind 4?

3 () "" - ? 10 - 100 - 1.000 - 10.000 - 100.000

, : , (1,2,3,4,5). , div, THEN - .

Answer 1

.

• DOM, JavaScript. , ( ) / DOM, , DOM , . innerWidth, offsetTop getBoundingClientRect. . : , Reflow, Restyle.
  DOM . DocumentFragment, DOM.

• , , JS-, . , . Array.prototype.sort, , .

Answer 2

DOM .

HTML:

<div id="wrapper">
  <div id="par" class="parent">
    <div id="5">5</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="1">1</div>
    <div id="4">4</div>
  </div>
</div>

JavaScript:

var clone = document.getElementById("par")
  .cloneNode(true)
var childs = [].slice.call(clone.children);
var sorted = childs.sort(function(a, b) {
  return parseInt(a.id) - parseInt(b.id)
})
var frag = document.createDocumentFragment();
sorted.forEach(function(el) {
  frag.appendChild(el)
})

var wrapper = document.getElementById("wrapper");
wrapper.removeChild(document.getElementById("par"));
wrapper.appendChild(frag);

: DOM .

, O (n log n) . , n * log (n) DOM-. , .

, , n + 1 DOM, . , , 2/O (1), , , n + 1, .

:

, 5 . , , . .

, 1000 . 10 000 (n * log n = 1000 * 10) **. node , 10 000 DOM.

, DOM, javascript-, , 1000 DOM. , , DOM: ***

** , . 2 1024, 10 *** , , . , /!

Answer 3

Please take a look at this code.

It basically removes the container from dom, applies sorting, inserts it into dom.

Usually this can all happen within the same frame, so it will not affect the length of the page / scroll problems.

+function() {
  /**
   * Finding thing wrapping class
   */
  var $con = $('#container');
  /**
   * getting the parent of the wrapping class so we can reinsert when we're done.
   */ 
  var $parent = $con.parent();
  /**
   * Removing container from dom so we can sort in speed
   */   
  $con.remove();
  
  /**
   * Getting the things we need from container that we need to sort
   */
  var $tosort = $con.find('.thing');
  
  /**
   * Apply sorting algorything, get a newly sorted list
   */
  var $neworder = $tosort.sort(function(a,b){
     return parseInt(a.innerText) > parseInt(b.innerText);
  });
  /**
   * Simply append the newly ordered list. They are the same objects, not clones so they'll fit into the right order.
   */
  $con.append($neworder);
  /**
   * Reinsert container into the dom.
   */
  $parent.append($con);
}()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <div id="container">
    <div class="thing">
      4
    </div>
    <div class="thing">
      3
    </div>
    <div class="thing">
      1
    </div>
    <div class="thing">
      5
    </div>
    <div class="thing">
      2
    </div>
  </div>
</div>

Run codeHide result