如何提高分配高度（DOM操作）的性能？

Question

我有一个案例需要即时操作 height 属性。就此而言，我使用以下代码得到了解决方案：

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

它工作正常，计算准确无误。但是，就性能而言，它非常慢，因为在实际情况下，表最多可以有 100 行。因此，我尝试通过使用原生 js 和其他一些技巧来改善它。代码如下：

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

结果还不错。它将性能提高了大约两倍。但是，有可能会错过大约 1 px 的计算，不幸的是，这是不能容忍的。

性能计算演示：https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/

在那个Demo中，结果：

• 第一个代码：+- 2.210000000000008 毫秒
• 第二个代码：+- 0.8699999999998909 毫秒（+-2x 更好，但错过计算机会 1px）

因此，我一直在想有没有其他方法可以提高第一个代码的性能？

更新

我刚刚发现了另一个可能有用的信息。

• 在桌面版 Chrome v62.0.3202.62 和移动版 Safari v10.3.3 中，性能还不错。但是，在其他浏览器中，它仍然很慢。
• 我认为主要问题出在$(this).parent().find('td').height(height);。因为当我禁用那条线时，性能会变得更好。因此，我想如果有改进这条线的解决方案会很好。

Answer 1

嗨，我相信这里只使用 CSS 是 demo，我从 td y th 的 css 中删除了 fied 属性：

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>

无需 JS