javascript - 为什么这个 jQuery 代码比这个慢很多？

Question

我有 2 个 Div，如列，每列都有包含不同内容的内部 div，如下所示:
image for the HTML layout
(我将“内部 div”称为“线”)。

column#1中line#1的文本是column#2中line#1的翻译，
第 1 列中第 2 行的文本是第 2 列中第 2 行的翻译，
第 1 列中第 3 行的文本是第 2 列中第 3 行的翻译，
等等。
我需要实现的是:
第 1 列中的第 1 行应与第 2 列中的第 1 行对齐，
第 1 列中的第 2 行应与第 2 列中的第 2 行对齐，
第 1 列中的第 3 行应与第 2 列中的第 3 行对齐，
等等。

所以代替这个: non-aligned lines我希望它像这样aligned (equal Heights) lines

我用这段代码实现了这一点

  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])
   }
 }

对于 2 列 div 来说效果很好而且相当快(300 行/列需要 55 毫秒)。

现在我想更改代码以支持更多数量的列(假设我有 3 或 4 列彼此相邻，并且希望将每一行与其对应的行对齐。)

所以我更改了代码以从每列获取具有相同索引的行并使用 Math.max 计算最大行高并将其应用于具有该索引的所有行，如下所示

    //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); 
    }   

但是当我在 2 列(每列 3oo 行)上执行此函数时，它会占用(2000 毫秒)。

所以我更改了代码并使用 .reduce 代替，这允许我保存具有最大高度的行的索引，以便在为元素(其他行)设置最大高度时可以忽略它

这是我使用的代码

        //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);    
          }
        });

     }  

使用此代码，大约需要(在 2 列上，每列 3oo 行)。 (1400 毫秒)。

这里是 3 个案例的摆弄:
https://jsfiddle.net/gc4xL36g/

为什么最后两个函数比第一个函数慢得多？如果我有超过 2 列，如何改进代码？

更新:
//////////////////////////////////////////////////////////////////////////
正如@Icepickle 在他的评论中提到的

selections are expensive

所以我更改了代码，只在循环外使用一个选择器，并将其保存在循环内使用的变量中。它节省了一些毫秒，但距离第一代码还很远，我认为大部分时间是计算我使用 reduce 来实现的相应行之间的最大高度，我很感激如果有一个建议更快地完成此操作

这是新代码:

  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

按照@DanielBeck的建议

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

解决问题，
这是新代码，它比第一个代码更快

 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);   
  }