[英]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. 我有一个需要即时操纵height属性的情况。 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.
但是,为了提高性能,它相当慢,因为在实际情况下,该表最多可以包含100行。 Therefore, I tried to ameliorate it by using native js and some other tricks.
因此,我尝试使用本机js和其他技巧来改善它。 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.
但是,有可能该计算将丢失约1像素,并且不幸的是,它是不能容忍的。
Demo for performance calculation: https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/ 性能计算演示: https : //jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/
In that Demo, the result: 在该演示中,结果为:
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. 我刚刚发现了另一条可能有用的信息。
$(this).parent().find('td').height(height);
$(this).parent().find('td').height(height);
. Hi as I belive only using CSS here is a demo , i remove fied property from css of the td y th: 嗨,我相信自己仅使用CSS,这是一个演示 ,我从td y th的css中删除了fied属性:
CSS: 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: 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>
NO JS needed 无需JS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.