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

Question

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:

$('table tbody tr td:first-child').each(function(){
    var height = $(this).height();
    $(this).parent().find('td').height(height);
  });

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:

var firstColumn = $('#table-wrapper td:first-child');
  for (var i = 0; i < firstColumn.length; i++) {
    firstColumn[i].parentNode.style.height = firstColumn[i].offsetHeight + "px";
  }

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?

Updated

I just found another information that probably useful.

In desktop Chrome v62.0.3202.62 and mobile Safari v10.3.3, the performance isn't that bad. However, in the other browser, it's still slow.
I assume the main problem is at $(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.

by default a table make this if you dont predefine by css any height, it takes more higher. I think this will solved using css only, without js — Álvaro Touzón, Oct 25 '17 at 13:56
@ÁlvaroTouzón Welp, here is the reason why I use js for assigning the height: https://stackoverflow.com/questions/46832756/how-to-make-trs-height-of-positionfixed-column-follow-its-contents-height — Yusril Maulidan Raji, Oct 25 '17 at 13:58

score 0 · Answer 1 · answered Oct 25 '17 at 14:00

Hi as I belive only using CSS here is a demo , i remove fied property from css of the td y th:

CSS:

#table-wrapper {
  width: 95%;
  float: left;
  overflow-x: scroll;
  background: #ddd;
}

table {
  background: #fff;
  width: 1200px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

table thead tr th {
  width: 15em;
}

table thead tr th:first-child,
table tbody tr td:first-child {
  top: auto;
  left: 0.5;
  /*position: fixed;*/
  width: 6em;
}

table thead tr th:nth-child(2),
table tbody tr td:nth-child(2) {
  padding-left: 7em;
  /*to show second column behind the first*/
}

HTML:

<button id="left">&larr;</button>
<button id="right">&rarr;</button>

<div id="table-wrapper">
  <table border="1"colspan="0" width="100%" height="100%">
    <thead >
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1<br/>asdasdada</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>2<br/>asdasdada<br/>asdasdada</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>3<br/>asdasdada</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>4<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>5<br/>asdasdada</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
    </tbody>
  </table>

</div>

NO JS needed

But using your code disables the freeze column. See the following demo, please try to move the horizontal scroll bar: https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/ — Yusril Maulidan Raji, Oct 25 '17 at 14:03
when is fixed no control from table parent is made for heighht or width... , im tryin only with css — Álvaro Touzón, Oct 25 '17 at 14:13
yes i know it can be done look at this https://stackoverflow.com/a/14486644/4921471 @YusrilMaulidanRaji — Álvaro Touzón, Oct 25 '17 at 14:19
Unfortunately, your given example still doesn't work appropriately. If you add more than one line on the first column, the height will not be extended automatically. http://jsbin.com/foyuxoluvo/1/edit?html,css,output — Yusril Maulidan Raji, Oct 25 '17 at 14:47
then i got a idea, calculate the height in base of lines of first row, lines*25px ? if you known it before — Álvaro Touzón, Oct 25 '17 at 14:50

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

1 Answers1