jQuery width() 方法性能

Question

我是一个 jQuery 菜鸟，试图找出我们在大型表中遇到的性能问题。我们有一个自制的表格小部件，除其他外，它将列宽度设置为标题宽度或行宽度的最大值。

对于 10 行 x 500 列的表格，这可能需要近 40 秒 (!)，考虑到该表格可以在不到一秒的时间内呈现，这似乎有点过长。

这是整个函数:

  var dataTable = this._div.find('.data-table');
  var headerTable = this._div.find('.data-header-table');
  if (dataTable.length === 0 || headerTable.length === 0) {
    return;
  }
  dataTable = dataTable[0];
  headerTable = headerTable[0];

  if (dataTable.rows.length === 0) {
    return;
  }

  var dataTr = dataTable.rows[0];
  var headerTr = headerTable.rows[headerTable.rows.length - 1];

  var marginColumnWidths =
    $(dataTr.cells[0]).outerWidth(true) +
    $(dataTr.cells[1]).outerWidth(true) +
    $(dataTr.cells[2]).outerWidth(true) -
    DOM.getHPaddings($(headerTr.cells[0])) + 1;

  $(headerTable)
    .find('> tbody > tr > td:first-child')
    .width('1%')
    .children()
      .first()
      .width(marginColumnWidths);

  for (var i = 1; i < headerTr.cells.length; i++) {
    var headerTd = $(headerTr.cells[i]);
    var dataTd = $(dataTr.cells[i + 2]);
    var commonWidth = Math.max(
      Math.min(headerTd.width(), 100),
      dataTd.width()
    );
    headerTd.width('1%').find('> div').width(commonWidth);
    dataTd.children().first().width(commonWidth);
  }

如果我更换

    var commonWidth = Math.max(
      Math.min(headerTd.width(), 100),
      dataTd.width()
    );

有一个常数

    var commonWidth = 100;

执行时间从 38 秒降至不到一秒，表明问题在于读取/计算当前宽度，而不是设置新宽度。从我所做的分析/采样来看，jQuery 似乎花费了过多的时间来搞乱 CSS 计算。

谁能推荐一种更有效的方法来做到这一点？

编辑:

我尝试了 css("width") 和outerWidth()，性能没有任何显着变化。我们使用的是 jQuery 1.7.2，但升级到 1.8.1 并没有显着改变性能。

Answer 1

使用.css("width")代替.width()，对.width()方法进行了更改使其执行速度变慢。阅读此内容以获取更多信息:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

var commonWidth = Math.max(
  Math.min(parseFloat(headerTd.css("width")), 100),
  dataTd.width()
);