JavaScript may experience delays when setting the height

Question

JavaScript may experience delays when setting the height

Two html tables I have, filled with various elements like span, input, select, and more. My goal is to make sure that the rows in both tables are of equal height. Unfortunately, simply setting the 'height' attribute on tr or td did not yield the desired results, as a row would adjust its height based on the tallest element within it.

Unable to find a CSS solution for enforcing row heights, I resorted to writing a JavaScript function. This function loops through each row, compares the heights of the corresponding rows in the two tables, and adjusts the height to match the taller row.

However, this method proved to be slow when dealing with tables containing numerous rows. It seems that the performance lag is caused by the reflow triggered by styling changes.

Is there any advice on how to improve this? Keep in mind that merging the tables is not an option.

Below is a snippet of my code, but I am open to suggestions for a completely different approach:

var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");

for (chr=0;chr < leftTableRows .length;chr++) {
    var rowLeft = leftTableRows [chr];
    var heightleft = rowLeft.offsetHeight;
    var rowRight = rightTableRows[chr];
    var heightright = rowRight.offsetHeight;
    if(heightleft != heightright){
            console.log("left: "+heightleft +" - right: "+heightright);
        if(heightleft>heightright){
           rowRight.setAttribute("style","height:"+heightleft+"px");
        }else{
           rowLeft.setAttribute("style","height:"+heightright+"px");
        }
    }

}

javascript jquery css performance reflow

Answer 1

Answer №1

If you find yourself repeatedly reading and writing to the DOM, it can significantly impact performance. A better approach is to first gather all the information you need (reads) and then make the necessary changes (writes). This prevents unnecessary reflows and calculations in between. Consider using two separate loops: one to determine the correct heights and another to apply them:

var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");
var length = leftTableRows.length;
var heights = [];

for (var chr = 0; chr < length; chr++) {
    var rowLeft = leftTableRows[chr];
    var heightleft = rowLeft.offsetHeight;
    var rowRight = rightTableRows[chr];
    var heightright = rowRight.offsetHeight;

    if (heightleft > heightright) {
        heights.push({
            elem: rowRight,
            height: heightleft
        });
    } else {
        heights.push({
            elem: rowLeft,
            height: heightright
        });
    }
}

for (var i = 0; i < heights.length; i++) {
    heights[i].elem.style.height = heights[i].height + 'px';
}

By storing elements and their new heights as objects in an array, you only access the DOM once. Other optimizations include eliminating unnecessary if() statement, caching the HTML nodelist length, and directly setting style.height instead of using setAttribute() which is slower.

Answer 2

If you find yourself repeatedly reading and writing to the DOM, it can significantly impact performance. A better approach is to first gather all the information you need (reads) and then make the necessary changes (writes). This prevents unnecessary reflows and calculations in between. Consider using two separate loops: one to determine the correct heights and another to apply them:

var rightTableRows = mainTable.children("tbody").children("tr:parent");
var leftTableRows = colHeader.children("tbody").children("tr:parent");
var length = leftTableRows.length;
var heights = [];

for (var chr = 0; chr < length; chr++) {
    var rowLeft = leftTableRows[chr];
    var heightleft = rowLeft.offsetHeight;
    var rowRight = rightTableRows[chr];
    var heightright = rowRight.offsetHeight;

    if (heightleft > heightright) {
        heights.push({
            elem: rowRight,
            height: heightleft
        });
    } else {
        heights.push({
            elem: rowLeft,
            height: heightright
        });
    }
}

for (var i = 0; i < heights.length; i++) {
    heights[i].elem.style.height = heights[i].height + 'px';
}

By storing elements and their new heights as objects in an array, you only access the DOM once. Other optimizations include eliminating unnecessary if() statement, caching the HTML nodelist length, and directly setting style.height instead of using setAttribute() which is slower.

Answer 3

Answer №2

If you're unsure about the maximum height of your cells, consider converting your tables into divs and utilizing display flex.

This approach will give you the desired functionality but will require restructuring the HTML layout.

Instead of placing elements from both tables in a sequential order, you'll need to alternate between them.

Answer 4

If you're unsure about the maximum height of your cells, consider converting your tables into divs and utilizing display flex.

This approach will give you the desired functionality but will require restructuring the HTML layout.

Instead of placing elements from both tables in a sequential order, you'll need to alternate between them.

Answer 5

Answer №3

Here's a snippet from a helpful response written by jfriend00. Don't forget to show your appreciation with an upvote!

Optimizing DOM Manipulations

Reflows are queued. ....
Requesting certain properties can trigger an immediate reflow. Some DOM properties require accurate layout information, which may prompt the browser to relayout synchronously if there is pending layout from a previous modification. To avoid this, ensure you request all necessary properties before making any changes to the DOM.
Batch up all your DOM changes at once. It's best practice to make all pending DOM changes together in one synchronous batch of Javascript code. This allows the browser to queue the reflow and repaint actions and perform them only once after all DOM changes have been made. For further efficiency, combine modifications to the same element to process it only once with the final value instead of each change separately.
DOM modifications can sometimes be optimized. ....

Points 2 and 3 are crucial - fetching offsetHeight for each row and setting new values individually can lead to unnecessary reflows. Instead, read all rows first, store pending changes in memory, and apply new heights in a separate loop using the saved values.

Answer 6

Here's a snippet from a helpful response written by jfriend00. Don't forget to show your appreciation with an upvote!

Optimizing DOM Manipulations

Reflows are queued. ....
Requesting certain properties can trigger an immediate reflow. Some DOM properties require accurate layout information, which may prompt the browser to relayout synchronously if there is pending layout from a previous modification. To avoid this, ensure you request all necessary properties before making any changes to the DOM.
Batch up all your DOM changes at once. It's best practice to make all pending DOM changes together in one synchronous batch of Javascript code. This allows the browser to queue the reflow and repaint actions and perform them only once after all DOM changes have been made. For further efficiency, combine modifications to the same element to process it only once with the final value instead of each change separately.
DOM modifications can sometimes be optimized. ....

Points 2 and 3 are crucial - fetching offsetHeight for each row and setting new values individually can lead to unnecessary reflows. Instead, read all rows first, store pending changes in memory, and apply new heights in a separate loop using the saved values.

Answer 7

Answer №4

Uncertain of the exact reason for this issue, however:

By adjusting the line-height style of the td element, you can potentially increase the height of the td itself and in turn affect the height of the tr element. If this doesn't work as expected, consider wrapping the content of the td within a div and applying the line-height to that instead.

An alternative approach, for efficiency, is to assign the same style class to all relevant elements. Then, once the heights have been calculated, set the line-height for the class to modify the height of all associated elements. Exploring Javascript's styleSheet object will provide further insight into how to accomplish this....

Answer 8

Uncertain of the exact reason for this issue, however:

By adjusting the line-height style of the td element, you can potentially increase the height of the td itself and in turn affect the height of the tr element. If this doesn't work as expected, consider wrapping the content of the td within a div and applying the line-height to that instead.

An alternative approach, for efficiency, is to assign the same style class to all relevant elements. Then, once the heights have been calculated, set the line-height for the class to modify the height of all associated elements. Exploring Javascript's styleSheet object will provide further insight into how to accomplish this....

JavaScript may experience delays when setting the height

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for holding off until the fetch operation is complete

A step-by-step guide on bringing in objects in JavaScript and Node.js

Display a div using JavaScript when the mouse moves and make it follow the cursor

gap between the main content and the anchored bottom navigation

How to apply dynamic styling to a MatHeaderCell using NgStyle?

I am perplexed by the CSS property `height: auto;` which seems to be making the element taller than necessary. How exactly is

Is there a way to use Selenium to automate the clicking of two buttons with empty href attributes? Each button has a function name and arguments within the href

Is there a way for me to receive numerical values instead of NaN?

Node.js Express.js Module for Asynchronous SqLite Operations

Creating Images that appear optimized on smaller screens - the art of responsive design!

Encountering an issue with a <a> tag containing a <div> element with two columns

Not another instance of the elusive 'Unrecognized provider' error in an AngularJS service

Unraveling the enigmatic duality of self-closure with Bootstrap 4

Complete the form submission and transfer the data to ajax on a separate page

Seeking help on modfiying div content with AJAX - any tips for showing navigation using hash or anchor?

Issues with HTML Email display

Insert a THREE.Points element into the scene: Error in THREE.Object3D.add: The object being added is not a valid instance of THREE.Object3D (

Creating a JSON array in JavaScript: A step-by-step guide

Display the intersection of two objects in varying colors using three.js

Tips for importing a JavaScript file from a URL and initializing a class in a React component