[英]How to increase the performance of assigning height (DOM manipulation)?
我有一个需要即时操纵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像素,并且不幸的是,它是不能容忍的。
性能计算演示: https : //jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/
在该演示中,结果为:
因此,我一直在思考是否还有其他方法可以提高第一个代码的性能?
更新
我刚刚发现了另一条可能有用的信息。
$(this).parent().find('td').height(height);
。 因为当我禁用该行时,性能会好得多。 因此,我想如果有解决方案可以改善这条线,那就太好了。 嗨,我相信自己仅使用CSS,这是一个演示 ,我从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">←</button>
<button id="right">→</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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.