Javascript 如何提高指定高度（DOM操纵）的性能？

我有一个案例，我需要在运行中操纵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";
  }

var firstColumn=$（“#表包装器td:firstchild”）；
对于（var i=0；i

结果很好。它将性能提高了大约两倍。然而，有可能在大约1像素的时间内计算失败，不幸的是，这是不能容忍的

性能计算演示：

在该演示中，结果是：

• 第一个代码：+-2.21000000000008毫秒
• 第二个代码：+-0.86999999998909毫秒（+-2倍更好，但1倍计算失败机会）

因此，我一直在思考是否有其他方法可以提高第一个代码的性能

已更新

我刚找到另一个可能有用的信息

• 在桌面Chrome v62.0.3202.62和mobile Safari v10.3.3中，性能并没有那么差。然而，在另一个浏览器中，它仍然很慢
• 我假设主要问题在

  $（this.parent（）.find（'td'）.height（height）。因为当我禁用该行时，性能会变得更好。因此，我认为如果有一个解决方案来改进这条线，那将是一件好事

---

您好，我相信只使用CSS这里有一个，我从td y th的CSS中删除了fied属性：

CSS:

HTML:

&larr；
&rarr；
标题1
标题2
头3
头4
标题5
1
asdasdada
12
13
14
15
2
asdasdada
asdasdada
22
23
24
25
3
asdasdada
32
33
34
35
4
asdasdada
asdasdada
asdasdada
asdasdada
asdasdada

42
43
44
45
5
asdasdada
52
53
54
55

---

不需要JS

默认情况下，一个表可以这样做，如果你不通过css预定义任何高度，它需要更高的值。我认为这只能用css解决，没有js@elvarotouzón Welp，以下是我使用js指定高度的原因：我在回答中做了一个演示，请在你的另一个问题中查看我的答案。@Tomalak好的，让我检查一下。但是使用你的代码会禁用冻结列。看到下面的演示，请尝试移动水平滚动条：好的。。。无论如何先谢谢你……）如果已修复，则不会从表父级对高度或宽度进行控制，我只想和CSSYE合作我知道这是可以做到的看看这个@YusrilMaulidanRajiOkay让我检查一下。

#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*/
}

<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>