How to increase the performance of assigning height (DOM manipulation)?

How to increase the performance of assigning height (DOM manipulation)?

I have a case which I need to manipulate the height property on the fly. For that matter, I got a solution by using this code:
  2. $('table tbody tr td:first-child').each(function(){
  3.     var height = $(this).height();
  4.     $(this).parent().find('td').height(height);
  5.   });
It works fine and the calculation is precisely correct. However, for the performance, it's pretty slow because in the real situation, the table can have up to 100 rows. Therefore, I tried to ameliorate it by using native js and some other tricks. Here is the code:
  1. var firstColumn = $('#table-wrapper td:first-child');
  2.   for (var i = 0; i < firstColumn.length; i++) {
  3.     firstColumn[i].parentNode.style.height = firstColumn[i].offsetHeight + "px";
  4.   }
The result is pretty good. It increases the performance around two times faster. However, there is a chance that the calculation would be miss for around 1 px and unfortunately, it can't be tolerated.

Demo for performance calculation:  https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/

In that Demo, the result:
  • First code: +- 2.210000000000008 milliseconds
  • Second code: +- 0.8699999999998909 milliseconds (+-2x better, but 1px miss calculation chance)
Thus, I have been thinking is there any other way to increase the performance of the first code?

I assume the main problem is at:
  1. $(this).parent().find('td').height(height);
Because when I disable that line, the performance becomes much better. Thus, I suppose it would be nice if there is a solution to improve this line.