为什么这个jQuery代码比这个慢得多？

Question

I have 2 Divs like columns every column has inner divs with different content like this:
image for the HTML layout
(I will call the "inner div" as "line").

the text of line#1 in column#1 is the translation of line#1 in column#2,
the text of line#2 in column#1 is the translation of line#2 in column#2,
the text of line#3 in column#1 is the translation of line#3 in column#2,
and so on.
What I need to achieve is:
line#1 in column#1 should be aligned to line#1 in column#2,
line#2 in column#1 should be aligned to line#2 in column#2,
line#3 in column#1 should be aligned to line#3 in column#2,
and so on.

so instead of this: non-aligned lines I want it to be like this aligned (equal Heights) lines

and I achieved that with this code

  var t0 = performance.now();
  var leftArray = $('#left .line').map(function(i) {
    return $(this).height();
  });
  var rightArray = $('#right .line').map(function(i) {
    return $(this).height();
  });
  for (var i = 0; i < leftArray.length; i++) {
    if (leftArray[i] < rightArray[i]) {
     $('#left .line').eq(i).css('height', rightArray[i])
    } else if (leftArray[i] > rightArray[i]) {
     $('#right .line').eq(i).css('height', leftArray[i])
   }
 }

which works good and fairly fast for 2 columns divs it takes about (55ms for 300 lines/column).

Now I want to change the code to support more number of columns (Imagine I have 3 or 4 columns beside each other and want to align each line with it's corresponding.)

so I changed the code to get lines with the same index from each column and used Math.max to calculate the max line height and apply it to all lines with that index, like this

    //number of lines/column
    var column_lines_count =$('.lines').get(0).childElementCount;

    var elementHeights,target,maxHeight;
    for (var i = 1; i < column_lines_count; i++) {

     //get lines with the same index from each column
       target = $('[data-row="'+i+'"]');

    //retun height for each line
       elementHeights = target.map(function() {
          return $(this).height();
       }).get();

      //get the max height
      maxHeight = Math.max.apply(null, elementHeights);

      //set the max heights for all lines with this index number 
      $('[data-row="'+i+'"]').css('height', maxHeight); 
    }   

but when I execute this function on the 2 columns with 3oo lines/column it takes over (2000ms).

So I changed the code and used .reduce instead, which allows me to save the index of line with the maximum height so I can ignore it when setting max height to elements (other lines)

Here is the code I used

        //number of lines/column
        var column_lines_count =$('.lines').get(0).childElementCount

        var target,realArray,maxHeight,index_max_height,next_h=0;
        for (var i = 1; i < column_lines_count; i++) {

         //get lines with the same index from each column
         target = $('[data-row="'+i+'"]');

         //Convert to array so we can use reduce
         realArray =  $.makeArray( target );

         //variable to save the index of the line that has the maximum height, so we don't have to set the height for it. 
         index_max_height=0

           /*
           * Reduce=>
           * intial value => $(realArray[0]).height()
           * next is represents the line
           * index = index of that line
            */  
           maxHeight = realArray.reduce(function(biggerHeight, next,index) {
             next_h = $(next).height();
             if(biggerHeight > next_h){
               return biggerHeight;
             } else{
               index_max_height =index;
               return next_h; 
             }
           }, $(realArray[0]).height());        

       /*
        *for elements (lines) that has index != index of max_height line - set the max height
        *
        */
        $.map( target, function( a, index ) {
            if(index != index_max_height){
              $(a).css('height', maxHeight);    
          }
        });

     }  

with this code it takes (on the 2 columns with 3oo lines/column) approx. (1400ms).

here is a fiddle with the 3 cases:
https://jsfiddle.net/gc4xL36g/

Why the last 2 functions are much slower then the first one? and how I can improve the code if I have more than 2 columns?

Update:
/////////////////////////////////////////////////////////////////
as @Icepickle mentioned in his comment

selections are expensive

so I changed the code and use only one selector outside the loop and save it in variable which used inside the loop. it save some milliseconds but it still far from the code number one and I think the most part takes time is calculating the max height between the corresponding lines which I use reduce to implement, I appreciate if there is a suggestion to do this faster

Here is the new code:

  var number_of_columns = $('.lines').length;     
  var lines = $('.line');
  var column_lines_count =lines.length/2;
  var realArray,maxHeight,index_max_height,next_h=0;

  for (var i = 1; i < column_lines_count; i++) {
    var corresponding_lines = [];
    var mindex;
    for(var j=0; j < number_of_columns; j++){
      mindex = i-1+(j*column_lines_count);
      corresponding_lines.push(lines[mindex]);
     }

     //Convert to array so we can use reduce
     realArray =  $.makeArray( corresponding_lines );

     //variable to save the index of the line that has the maximum height, so we don't have to set the height for it. 
      index_max_height=0


    /*
     * Reduce=>
     * intial value => $(realArray[0]).height()
     * next is represents the line
     * index = index of that line
     */

    maxHeight = realArray.reduce(function(biggerHeight, next,index) {
    next_h = $(next).height();
    if(biggerHeight > next_h){
        return biggerHeight;
    } else{
       index_max_height =index;
       return next_h; 
    }
    }, $(realArray[0]).height());       

    /*
     *for elements (lines) that has index != index of max_height line - set the max height
     *
     */
     $.map( corresponding_lines, function( a, index ) {
      if(index != index_max_height){
        $(a).css('height', maxHeight);  
      }
     });

    }   

Answer 1

As suggested by @DanielBeck

Precalculate those heights in an array instead of reading them from the DOM every time

solve the problem,
Here is the new code which become faster more than the first code

 var number_of_columns = $('.lines').length;

 var lines = $('.line');
 var column_lines_count =lines.length/number_of_columns;
 var leftArray = lines.map(function(i) {
     return $(this).height();
 }); 
 var realArray,maxHeight;

 for (var i = 1; i < column_lines_count; i++) {
      var corresponding_lines = [];
      var mindex;
      for(var j=0; j < number_of_columns; j++){
          mindex = i-1+(j*column_lines_count);
           corresponding_lines.push(leftArray[mindex]);
     }

    //Convert to array so we can use reduce
     realArray =  $.makeArray( corresponding_lines );


   maxHeight = realArray.reduce(function(biggerHeight, next,index) {   
      if(biggerHeight > next){
        return biggerHeight;
      } else{
        return next; 
      }
    }, realArray[0]);       

    $('[data-row="'+i+'"]').css('height', maxHeight);   
  }