1
\$\begingroup\$

Does it make any sense and how to modify the JavaScript/jQuery code below to increase the performance? The working code is:

var rightTr = $(".superBlock div.right tr:visible");

$(".superBlock div.left tr:visible").each(function(i){
    if ($(this).height() != rightTr.eq(i).height()){
        if ($(this).height() > rightTr.eq(i).height()){
            rightTr.eq(i).height($(this).height());
        } else {
            $(this).height(rightTr.eq(i).height());
        }
    }
});

The logic is to update the respective rows within two tables - to assign the bigger height to smaller height if the heights of respective rows are different.

The eq(i)s are needed in this code as the actual problem is a bit more complicated than described here.

Most of the cells are expected to be equivalent so the first thing I do is checking if the cells are equivalent. That condition should exclude most of comparisons if it is more or it is less (one comparison instead of two).

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

The only think I can think of to make it perform better is to store the jQuery objects and heights in variables:

var rightTr = $(".superBlock div.right tr:visible");

$(".superBlock div.left tr:visible").each(function(i){
    var leftRow = $(this),
        leftRowHeight = leftRow.height(),
        rightRow = rightTr.eq(i);
        rightRowHeight = rightRow.height();

    if (leftRowHeight != rightRowHeight){
        if (leftRowHeight > rightRowHeight){
            rightRow.height(leftRowHeight);
        } else {
            leftRow.height(rightRowHeight);
        }
    }
});

You could simplify the if-else statement a little, though I don't think you'll realistically get a performance boost:

$(".superBlock div.left tr:visible").each(function(i){
    var leftRow = $(this),
        leftRowHeight = leftRow.height(),
        rightRow = rightTr.eq(i);
        rightRowHeight = rightRow.height();

    if (leftRowHeight > rightRowHeight){
        rightRow.height(leftRowHeight);
    } else if (leftRowHeight < rightRowHeight) {
        leftRow.height(rightRowHeight);
    }
});

The big hit to performance is the repainting and reflowing of the page that results from changing the row heights. If there really is a performance problem with resizing the table rows, then you could dive a little deeper into some enhancements.

  1. Figure out the height of the right table
  2. In the left column, insert a DIV before the table. Give it the same height as the right table
  3. Set the width attribute on the left table to it's current width in pixels
  4. Change the position of the table to absolute so that the table is in its own document flow
  5. Resize the rows
  6. Remove the absolute positioning and width attribute
  7. Hide the placeholder DIV

You should get a slight speed boost by making the table position: absolute while the row resizing gets done because the browser only has to reflow the TABLE element on screen, and not any surrounding elements, but really, this might not buy you very much unless the table is big.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.