javascript – 如何优化此jquery循环的执行时间？

我有一个循环通过类’GridCell’的表格cel中的所有div.
当调整网格或列的大小时,需要在某些情况下发生这种情况.

我扩展了行数和列数,以查看更多时间差异,现在循环大约为750毫秒.

但我不明白的是,“只是循环的一部分”要快得多.请参阅以下三个循环.第一个是缓慢的.仅执行第一个循环的一部分的第二个和第三个循环非常快.

//Around 750 ms
$('table.Grid tbody td.GridCell > div').each(function() {
    var width = $(this).parent().width();
    $(this).css('width', width - 3);
});

//Around 60 ms
$('table.Grid tbody td.GridCell > div').each(function() {
    var width = $(this).parent().width();
});

//Around 15 ms
$('table.Grid tbody td.GridCell > div').each(function() {
    $(this).css('width', 100);
});

所以一行,只有60或15毫秒,但两者一起是750.这有什么区别？

附：我执行循环的顺序无关紧要.第一个循环总是比其他循环慢得多,也就是在最后执行该循环时.

解决方法:

// collect the widths from the first row only
var widths = $('table.Grid tbody tr:first-child td.GridCell').map(function(idx) {
  return $(this).width() - 3;

  // or use:
  // return this.clientWidth - 3;
  // if you're not targeting IE <= 7
});

// apply the widths to each div
$('table.Grid tbody td.GridCell > div').each(function(idx) {
  this.style.width = widths[idx % widths.length] + 'px';
});

标签：jquery,javascript,execution-time,performance
来源： https://codeday.me/bug/20190620/1248161.html